試圖中心我的標籤在我的導航欄的頁面HTML的長度

Question

CSS：

body { 
    margin:0; 
} 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #ccfff5; 
} 

ul.topnav li {float: left;} 

ul.topnav li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

HTML：

<ul class="topnav" id="myTopnav"> 
    <li class="home"><a href="index.html">Home</a></li> 
    <li class="about us"><a href="about.html">About Us</a></li> 
    <li class="menu"><a href="menu.html">Menu</a></li> 
    <li class="location"><a href="location.html">Location</a></li> 
    <li class="facts"><a href="facts.html">Nutritional Facts</a></li> 
    <li class="promo"><a href="promo.html">Promotions</a></li> 
</ul> 

我所有的導航標籤是向左並不與頁面大小成比例。當我改變對齊方式時，它不會隨着頁面的大小而改變。我究竟做錯了什麼？

這是我的導航欄目前的樣子：

Answer 1

包括ul.topnav li { float: left; }全押li左側。

刪除它並添加text-align: center到ul.topnav應該給你你想要的。

Here's a JSFiddle showing that.覺得不自由實驗，看看如何float: left影響html等