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>