CSS中控制列表排列方式
作者:shenmeng 发布时间:November 13, 2009 分类:
列表默认是纵向排列的,但是可以通过在css中设置ul的clear属性和li的float属性来使列表横向排列。如果需要在内嵌的ul中再次实现列表竖排(实现下拉菜单需要),则只需设置内嵌li的属性为flaot:both;
如下代码就实现外层列表的横向排列和内层列表的纵向排列:
<head>
<title>列表排列方式</title>
<style type="text/css">
ul.test{
clear: both;
list-style: none;
}
ul.test li{
float:left;
margin:5px;
}
ul.test ul{
list-style:none;
}
ul.test ul li{
clear: both;
}
</style>
</head>
<body>
<ul class="test">
<li>test1</li>
<li>test2</li>
<li>
<ul>
<li>inner1</li>
<li>inner2</li>
</ul>
</li>
</ul>
</body>