在響應導航欄

Question

W3Schools的中心菜單項具有導航欄中的一個很好的例子，將一個小屏幕響應：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

怎樣纔可以有中心的菜單項，而不是左對齊？設置ul.topnav li {float: center;}只是使它們垂直堆疊。

Answer 1

嘗試編輯CSS是這樣的：

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align:center; 
} 

在這裏我們只是增加居中文本對齊方式。 Next

ul.topnav li {display:inline-block;} 

這裏我們刪除fload：left並將顯示設置爲內聯塊。這是否爲你創造了期望的結果？

Answer 2

float: center;是不是在CSS有效的，如果你想知道更多關於花車我建議採取看看「CSS佈局 - float和清除」文檔上的W3C：https://www.w3schools.com/css/css_float.asp

要對齊li到導航的中心，你可以這樣做：

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    text-align: center; 
} 

ul.topnav li { 
    display: inline-block 
} 

您也可以嘗試更Flexbox的辦法，只是有：

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    display: flex; 
    justify-content: center; 
} 

，如果你決定使用Flexbox的你不會需要添加：ul.topnav li { display:inline-block; }

Flexbox的很好時下的支持：http://caniuse.com/#feat=flexbox

Answer 3

你可以很容易地實現Flexbox做到這一點。

鏈接你給的W3網站刪除以下行：

ul.topnav li {float: left;} /*remove this line of CSS*/ 

接着，下面的CSS頁面

ul.topnav { 
    display: flex; 
    justify-content: center; 

    // rest of CSS goes here 

} 

的頂部添加到ul.topnav