導航欄不會移動

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>