如何解决在导航栏中放置项目
我是编码的初学者，并尝试使用React创建一个学生项目的网页。
为页面创建导航栏时出现问题。如何将项目（家庭，项目，团队，Kontakt）放置在栏的右侧？
这是当前的样子：[1]：https://i.stack.imgur.com/gUJPi.png
这是我当前正在使用的代码：
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);
＆容器和导航栏的scss代码：
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
}
和
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F,30%);
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4,auto);
grid-gap: 20px;
list-style: none;
float: right;
}
.navbar__navigation-items a:hover,.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
在此先感谢您的帮助！ :)（
解决方法
环绕元素，然后使用flexbox
.container {
display: flex;
align-items: center;
justify-content: space-between;
} const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__left">
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);,
我要在.navbar__title中添加flex：1。它将所有内容尽力推向右侧。
,将 flexbox 用于项目。我确实更改了代码，并使其对HTML-CSS友好，因此将其修改为适用于React（className，RouterLinks等）。
摘要：Nav已应用display: flex，并且具有2个子元素（徽标+标题和菜单），我添加了justify-content: space-between。
在<ul>类中，我添加了另一个display: flex，因此各项表现为一行。默认情况下，伸缩方向为行。如果要将任何内容用作列，则必须添加flex-direction: column。
这是一个有效的代码段：
* {
list-style: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar__navigation-items ul {
display: flex;
}
.navbar__navigation-items ul li {
margin-right: 10px;
} <nav class="navbar">
<div class="container">
<div class="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div class="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div class="navbar__navigation-items">
<ul>
<li>Home</li>
<li>Project</li>
<li>Team</li>
<li>Kontakt</li>
</ul>
</div>
</nav>,
您需要做的就是为您的margin-left: auto样式添加navbar__navigation-items。
这会将您的navbar__navigation-items定位在右侧，并将同一容器中的其他所有内容推到左侧。
另一个选择是使用flexbox。为您的container加上display: flexbox。并添加justify-content: space-between;，它也将起作用。但这将控制container中的所有其他元素根据该调用来运行。
请检查以下内容，我已经完成了所有工作。
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F,30%);
}
.container {
max-width: 115rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
margin-left: auto;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4,auto);
grid-gap: 20px;
list-style: none;
}
.navbar__navigation-items a:hover,.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}<nav class="navbar">
<div class="container" >
<div class="navbar__title">
<h2>Our project</h2>
</div>
<div class="navbar__navigation-items">
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
</div>
</div>
</nav>,
除了添加
外，还有多种方法浮动：对
到
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
float: right;
}
应该可以解决问题， 可能还需要增加宽度：100％也要添加到容器中
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
编辑： 我同意浮动不是最好的工具，但我建议使用浮动工具，因为他已经在代码中使用了浮动工具，并且只需要更改CSS即可，但是https://stackoverflow.com/a/63427704/8382007的答案宽度为100％
.container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
肯定更好
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。