CSS定位 - 無序列表

Question

我想在菜單標題的左側（水平顯示，而不是垂直）放置一個無序的項目列表。例如當你看到主頁，HTML等：

如何做到與CSS這種效果呢？

Answer 1

花車

ul 
{ 
    margin: 0; 
    list-style-type: none; 
} 
ul li 
{ 
    margin: 0; 
    list-style-type: none; 
    float: left; 
} 
ul li a 
{ 
    display: block; 
} 

<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">HTML</a></li> 
    <li><a href="#">...</a></li> 
</ul> 

要獲得列出像你有你的形象，你將需要有兩套UL，然後應用float: left;向左一個和float: right;的權利。

隨着浮動，你必須清除它們，以避免以後「打破」你的設計。您可以通過在列表下方添加<br style="clear: both;" />來完成此操作。您也可以將該樣式添加到下一個div。

Answer 2

.menu{ 
text-align:left; 
} 
.menu ul{ 
margin:0px; 
padding:0px; 
} 
.menu ul li{ 
display:inline; 
margin:0px; 
padding:0px 10px 0px 10px; 
text-align:center; 
} 


<div class="menu"> 
    <ul> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Menu2</a></li> 
     <li><a href="#">Menu3</a></li> 
    </ul> 
</div>