导航栏不会移动

Question

我正在尝试将我的导航列在标题的右侧，我希望它与我的名字（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>

不知道为什么导航是旗帜盒的最底部

Answer 1

怎么样添加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>

Answer 2

发生这种情况是因为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作为标题，然后相应地调整内容。

Answer 3

.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并转到文档。

Answer 4

您可以使用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>