导航栏不会移动
问题描述：
我正在尝试将我的导航列在标题的右侧，我希望它与我的名字（Jae Hong）保持一致。这是我的HTML导航栏不会移动
.banner {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #fff;
height: 90px;
}
.banner h1 {
border: 1px solid rgba(0, 0, 0, 0.3);
width: 170px;
font-size: 30px;
margin-left: 100px;
letter-spacing: 0.2em;
color: #000;
}
nav ul {
display: block;
text-align: right;
list-style-type: none;<div class="banner">
<h1> Jae Hong</h1>
<nav>
<ul>
<li><a href="#website" class="active"><b><u>Home</b></u></a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>不知道为什么导航是旗帜盒的最底部
答
怎么样添加position: absolute;到h1
.banner {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #fff;
height: 90px;
}
.banner h1 {
border: 1px solid rgba(0, 0, 0, 0.3);
width: 170px;
font-size: 30px;
margin-left: 100px;
letter-spacing: 0.2em;
color: #000;
position: absolute;
}
nav ul {
display: block;
text-align: right;
list-style-type: none;
}<div class="banner">
<h1> Jae Hong</h1>
<nav>
<ul>
<li>
<a href="#website" class="active">
<!-- here was something wrong -->
<!-- with opening/closing tags -->
<b>
<u>Home</u>
</b>
</a>
</li>
<li><a href="#resume">Resume</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
答
发生这种情况是因为h1和ul元素默认为block元素，因此将占用其父容器的宽度的100％。这就是为什么你在单独的行中看到你的导航。
一个选项是将您的ul更改为display: inline，然后添加float: right将其推到容器的末端。然后，您可以将float: left添加到h1元素以将其推向左侧。
.banner {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #fff;
height: 90px;
}
.banner h1 {
border: 1px solid rgba(0, 0, 0, 0.3);
width: 170px;
font-size: 30px;
margin-left: 100px;
letter-spacing: 0.2em;
color: #000;
float: left;
}
nav ul {
text-align: right;
list-style-type: none;
display: inline;
float: right;
}<div class="banner">
<h1> Jae Hong</h1>
<nav>
<ul>
<li><a href="#website" class="active"><b><u>Home</b></u></a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>这仅仅是1例。另一种选择是使用display: flex作为标题，然后相应地调整内容。
答
.banner {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #fff;
height: 90px;
display: inline-block;
}
.banner h1 {
border: 1px solid rgba(0, 0, 0, 0.3);
width: 170px;
font-size: 30px;
margin-left: 100px;
letter-spacing: 0.2em;
color: #000;
}
nav{
display: inline-block;
}
nav ul li {
display: inline;
text-align: right;
list-style-type: none;<div class="banner">
<h1> Jae Hong</h1>
</div>
<nav>
<ul>
<li><a href="#website" class="active"><b><u>Home</b></u></a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>检查这个代码。你的横幅div中有nav。 h1标签和导航标签也是块元素。让我知道你是否需要更清楚的解释。
和FYI检查bootstrap。一旦习惯了它，学习很容易，并且会节省大量的时间。 W3schools有初学者教程。我建议你打开w3schools并转到文档。
答
您可以使用flexbox来实现此目的。见下面的代码（阅读代码中的评论）。您还可以阅读更多关于“Flexbox”的信息。
.banner {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #fff;
height: 90px;
display: flex;;/**Added**/
align-items: center;;/**Added**/
flex-wrap: wrap;/**Added**/
}
.banner h1 {
border: 1px solid rgba(0, 0, 0, 0.3);
width: 170px;
font-size: 30px;
margin-left: 100px;
letter-spacing: 0.2em;
color: #000;
}
/**Added**/
nav {
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
nav ul {
display: block;
text-align: right;/**You can remove if you like**/
list-style-type: none;
}<div class="banner">
<h1> Jae Hong</h1>
<nav>
<ul>
<li><a href="#website" class="active"><b><u>Home</b></u></a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
这对我帮助很大。谢谢。我仍然无法理解这个显示属性。我想我理解block和inline，但我甚至没有意识到有一个flex选项。你能否详细说明一下？ –
@JayHong'display：flex'是指元素的Flexbox属性，它是CSS3中的新设计布局。你可以在这个W3链接阅读更多关于它 - https://www.w3schools.com/css/css3_flexbox.asp - 我强烈建议寻找使用它，因为它可以帮助响应式布局，并允许更轻松地操作元素，因为你可以避免“浮动”属性和需要“清除”浮动。 –