如何制作對稱的導航欄？

Question

我有這個導航欄：

左邊的空間太大，我想要左右相同的空間。 我有這段代碼：

 <!--html-->
         <nav>
           <ul>
            <li>Tutorials</li>
            <li>News</li>
           </ul>
          </nav>

/*css*/
nav{
background-color: rgb(255, 86, 86);
margin: auto;   
height: 50px;
padding: 10px;
width: fit-content;
margin: auto;
}
nav li{
    display: inline;
    padding: 10px;
}

Answer 1

看起來您正在與瀏覽器默認設置發生沖突。

將所有元素的瀏覽器默認填充/邊距重置為零是很常見的，因為某些元素（如 ul 和 li）可以有一些默認邊距/填充。 此外，您沒有將列表的list-style-type指定為none ，我認為這意味着無序列表默認為項目符號，這是您不想要的結果。

這是我個人會做的事情來完成你正在尋找的東西，不包括 colors：

* {
  margin: 0;
  padding: 0;
}

nav {
  padding: 10px;
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav li {
  margin-right: 10px;
  flex-shrink: 0;
}
nav li:last-child {
  margin-right: 0;
}

這會在所有項目周圍放置一個 10px 的空間，然后在每個項目之間放置一個 10px 的空間。 它還強制列表水平顯示，而無需內聯列表項。 CSS 彈性框技巧指南可能對您有所幫助。

這里有很多正確答案，所以請嘗試從中獲得樂趣並選擇最適合您的方法。