以響應爲中心的導航欄

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>標籤應刪除。