我无法让我的nav
坐在我喜欢的方式,标题很好,但ul
不会坐在右边。
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
nav ul li {
list-style: none;
position: relative;
}
<div class="nav">
<h2>hackeryou</h2>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Bootcamp</li>
<li>Part-Time</li>
</ul>
</nav>
</div>
我希望h2
能够保持原状,但我希望其他所有东西都能在右侧更加分开。
你并不真的需要justify-content: space-between
为nav ul
,因为整个nav
已经向右移动。只需根据需要添加margin
到nav ul li
- 请参阅下面的演示:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
nav ul li {
list-style: none;
position: relative;
margin: 10px; /* ADJUST THIS */
}
<div class="nav">
<h2>hackeryou</h2>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Bootcamp</li>
<li>Part-Time</li>
</ul>
</nav>
</div>