<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ul+li做出横纵表格</title> <style type="text/css">
#h-table {width:250px;margin-top:20px;}
#h-table ul li {list-style:none;float:left;width:100px;background-color:#801;margin-left:2px;margin-bottom:2px;}
#h-table2 {clear:left;}
#h-table2 ul li ul li {list-style-type:none;float:left;width:100px;background-color:#3FC;margin-left:2px}
#h-table2 .col {clear:both;list-style:none;line-height:30px}
#v-table {margin:0 auto;clear:left}
#v-table ul {width:85px;float:left;padding:0 0 0 0;margin:0 0 0 2px;}
#v-table ul li {list-style:none;color:blue;background-color:#CF0;line-height:30px;margin-bottom:2px;};
#table {
clear:left;
width:300px;
background-color:silver;
}
#table ul {
clear:left;
margin:0px;
padding:0px;
width:481px;
list-style-type:none;
border-bottom:1px #000 solid;
}
#table li {
float:left;
display:block;
margin:0px;
padding:0px;
width:95px;
}
</style>
</head>
<body>
<div id="h-table"><h3>横-单ul多
li</h3><ul><li>one</li><li>two</li><li>one</li><li>two</li><li>one</li><li>two</li><li>one</li><li>two</li></ul></div>
<div id="v-table"><h3>纵-多ul</h3><ul><li>one</li><li>two</li></ul><ul><li>three</li><li>four</li></ul><ul><li><a
href="http://hi.baidu.com/1babyo" target="new">我的博客</a></li><li>php</li></ul></div>
<div id="h-table2"><h3>横-多ul多li</h3><ul><li class="col"><ul><li>one</li><li>two</li></ul></li><li
class="col"><ul><li>three</li><li>four</li></ul></li><li class="col"><ul><li><a href="http://hi.baidu.com/1babyo"
target="new">我的博客</a></li><li>php</li></ul></li></ul></div>
<div id="table"><h3>横-多ul</h3>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>DEF</li>
</ul>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>DEF</li>
</ul>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
</body>
</html>