[英]How do I move a list to the right in my navbar? in reactjs and css
I want to move in my navbar a list to the right, as the image below indicates我想在导航栏中向右移动一个列表,如下图所示
My navbar.js: the class is navbar-links
我的 navbar.js:class 是
navbar-links
import React from "react";
import "./Navbar.css";
const Navbar = ({ isScrolling, information }) => {
const toTheTop = () => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
return (
<nav className={`navbar ${isScrolling > 20 ? "scrolling" : null}`}>
<div
className={`navbar-logo ${
isScrolling > 20 ? "scrolling-logo" : null
}`}
onClick={toTheTop}
>
<p>{information.name}</p>
</div>
<div
className={`navbar-links box ${
isScrolling > 20 ? "scrolling-links" : null
}`}
>
<ul>
{information.directions.map((direction) => (
<li key={direction.key}>
<a href={direction.url}>{direction.name}</a>
</li>
))}
</ul>
</div>
</nav>
);
};
export default Navbar;
my Navbar.css: I already tried using display: flex; align-items: center; justify-content: flex-end;
我的 Navbar.css:我已经尝试过使用
display: flex; align-items: center; justify-content: flex-end;
display: flex; align-items: center; justify-content: flex-end;
But it does not work但它不起作用
.navbar {
display: flex;
position: fixed;
top: 0;
background-color: transparent;
width: 100%;
height: 80px;
font-size: 20px;
z-index: 1;
}
.scrolling {
background-color: #000;
transition: all 0.5s ease;
}
.navbar-logo {
display: flex;
align-items: center;
padding-left: 50px;
color: #000;
cursor: pointer;
}
.scrolling-logo {
color: #fff;
transition: all 0.5s ease;
}
/* here is the div of my list */
.navbar-links {
display: flex;
align-items: center;
justify-content: flex-end;
}
.navbar-links > ul {
display: flex;
flex-direction: row;
list-style: none;
}
.navbar-links > ul > li {
padding: 0 5% 0 5%;
}
.navbar-links > ul > li > a {
color: #000;
}
.navbar-links > ul > li > a:hover {
color: #d4d4d4;
}
.scrolling-links > ul > li > a {
color: #fff;
transition: all 0.5s ease;
}
for view my code of the my proyect visit my repository https://github.com/Michael-Liendo/michaelliendo.com要查看我的项目代码,请访问我的存储库https://github.com/Michael-Liendo/michaelliendo.com
You can do it by justify-content: space-between;
你可以通过
justify-content: space-between;
, but it doesn't work properly now. ,但现在不能正常工作。
Because you set position: fixed;
因为你设置
position: fixed;
and not set left
or right
.并且不设置
left
或right
。
So you can do it by this CSS code.所以你可以通过这个 CSS 代码来做到这一点。
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: transparent;
width: 100%;
height: 80px;
font-size: 20px;
z-index: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.