以响应为中心的导航栏

Question

如果我想让列表居中但水平仍然响应，我该怎么办？

这里是我的html：

<ul class="topnav" id="myTopnav"> 
    <li><a href="">Freeskins</a></li> 
    <li><a href="">Freeskins</a></li> 
    <li><a href=" ">Giveaways</a></li> 
    <li ><a href="about.html">About</a></li> 
    <li><a class="active" href="index.html">Home</a></li> 
</ul> 

Answer 1

首先，你需要通过设置它的width，然后设置它的离开和权margin到auto集中列表。在下面的代码片段，我已经把它的宽度设置为400px

ul { 
    list-style-type: none; 
    margin: 0 auto;   <---- set left and right margin to auto 
    padding: 0; 
    width: 400px;   <---- set width 
} 

要显示列表水平，您需要在列表中设置的li的display价值inline。

li { 
    display: inline; 
    margin: 10px;   <---- add some margin to add some space between list items 
} 

测试在这里

Centralize your navbar and display it horizontally

旁注：在末你HTML代码片段刚刚闭幕ul标签</ul>之前，还有一个额外的</li>标签应删除。