html中ul li分两栏排列方法
2011-03-03 14:30codeif.com
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<ul>
我们想有下面两栏显示的显示效果
1 2 3 4 5 6
如何做到呢,添加上如下的css代码就可以了
<style type="text/css">
<!--
ul{list-style:none; width:300px;}
li{float:left; width:150px;}
-->
</style>
整体效果可以复制下面的代码测试
<!doctype html>
<html>
<head>
<style type="text/css">
<!--
ul{list-style:none; width:300px;}
li{float:left; width:150px;}
-->
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<ul>
</body>
</html>