在响应导航栏

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