css多栏布局探讨2

 第二种布局效果图如下：（总的来说这个比前一个要来的简单）

要求：每个li上下左右都是相同的10px

查看demo

html代码如下：

<div>
  <ul>
  <li><a href="#"><img src="p_w_picpaths/1.jpg" /><b>你好</b></a></li>
  <li><a href="#"><img src="p_w_picpaths/2.jpg" /><b>你好</b></a></li>
  <li><a href="#"><img src="p_w_picpaths/3.jpg" /><b>你好</b></a></li>
  <li><a href="#"><img src="p_w_picpaths/4.jpg" /><b>你好</b></a></li>
  <li><a href="#"><img src="p_w_picpaths/5.jpg" /><b>你好</b></a></li>
  <li><a href="#"><img src="p_w_picpaths/6.jpg" /><b>你好</b></a></li>
  </ul>
  </div>

Css代码如下：

*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
a{
text-decoration:none;
color:#666;
}
a img{
border:none;
}
div{
margin:0 auto;
width:520px;
text-align:left;
background:#CCC;
}
ul{
overflow:hidden;
_height:1%;
padding:0 10px 10px 0;
}
li{
float:left;
display:inline;
margin:10px 0 0 10px;
width:160px;
}
b{
width:160px;
display:block;
text-align:center;
}

与上一个实例不同的地方关键就是ul和li的css，而最最主要的就是这两段代码

ul的padding:0 10px 10px 0;和li的margin:10px 0 0 10px;你也可以考虑下其他组合方式，

但是一定要注意设置ul的padding-bottom为10px，不然在ie6 7下最下面是没有10px距离的，这个前面已经讨论了。如不明白请看上一篇

查看demo