CSS定位 - 无序列表

我想在菜单标题的左侧（水平显示，而不是垂直）放置一个无序的项目列表。例如当你看到主页，HTML等：CSS定位 - 无序列表

alt text

如何做到与CSS这种效果呢？

2010-10-29 keruilin

花车

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。

来源

2010-10-29 22:42:43

'float'可能是矫枉过正的（虽然我愿意在屏幕截图中检查该网站是否会显示类似的解决方案）。编写CSS的人们正在学习更多关于“内联块”显示类型的时间，这种类型更加通用，副作用也更少。作为介绍，这是一个跨浏览器解决方案：'display：-moz-inline-box;显示：inline-block; *显示：内联; * zoom：1;'（第一条规则适用于Firefox <3.0;最后两条适用于IE <8，如果元素的“本地”显示为“block”;则根据需要进行调整。） – eyelidlessness 2010-10-30 08:16:36

我更喜欢完全遵从使用方便。我不喜欢黑客，我不惜一切代价避免。此外，还有其他一些“内联块”问题，但它是一种选择，你应该提交一个答案。 – 2010-10-30 16:19:33

.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>

来源

2010-10-30 07:55:54 Eswar

CSS定位 - 无序列表

回答

相关问题