Navtab問題

Question

我正在從freecodecamp學習HTML和CSS。所有Bootstrap代碼我都有點困惑。

這裏是我的代碼：

h1 { 
 
    text-align: center; 
 
    letter-spacing: 5px; 
 
    color: coral; 
 
    font-family: verdana; 
 
} 
 
ul {     
 
    height: 20%; 
 
    background-color: darkgrey; 
 
    list-style-type: none; 
 
    display: solid;            
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 0% 5% 0% 5%; 
 
    text-align:      
 
} 
 
#first { 
 
    margin: 0% 0% 0% 30%; 
 
} 
 
li:hover {   
 
    background-color: bisque; 
 
    text-decoration: none; 
 
}

<h1> Test Website </h1> 
 
<div class="container-fluid"> 
 
    <div class="menu"> 
 
    <div id="tope"></div> 
 
    <ul id="navbar">     
 
     <li id="first"><a href="www.a.com"> Us </a></li> 
 
     <li><a href="www.b.com"> Work </a></li> 
 
     <li id="last"><a href="www.c.com"> Vids and photos </a></li> 
 
    </ul>  
 
    </div> 
 
</div>

演示：CodePen。

我正在努力的問題是，當我調整屏幕大小時，我的navtab（實際上，所有<li>元素）不會跟隨主標題<h1>元素。

我想製作某種網格系統，其中我的<li>以<h1>爲中心，但沒有Bootstrap。那可能嗎？如果是這樣，怎麼樣？

Answer 1

的原因，你的名單上沒有調整大小正確對齊是，你有一個margin-right增值到#first。這會使所有事情都不一致。但你是非常接近達到你想要的結果！

你只需要作一些修正：

http://www.bootply.com/YHHS5on2Ej

ul {     
    background-color: darkgrey; 
    list-style-type: none; 
    width: 100%; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    padding: 0% 5% 0% 5%; 
} 

獲取用於#first擺脫所有的CSS和注意display:solid是無效的CSS

Answer 2

嘗試像這樣的.menu,ul和li。 我不知道這是否符合您的需求，但通過此代碼，您爲您的ul設置了一個寬度，然後margin: auto將它居中並保持在標題之下。

 .menu { 
      background: darkgrey; 
     } 


     ul {     
      height: 20%; 
      list-style-type: none; 
      width: 300px; 
      margin: auto 
     } 

     li { 
      display: inline-block; 
      padding: 0% 5% 0% 5%; 

     }