css横版布局的技巧

<div class="con"> 
<ul>
<li><div class="test"> </div></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul> 

</div>

查了一些资料，灵活的css布局一般用ul这货，需要加一些style把它变成横着的，

<style type="text/css">
ul{
list-style:none;
margin:0;
padding:0;
}
li{
float:left;
margin-left:10px;
}
div.con{
border-style:dotted dotted dotted dotted;
width:400px;
height:100px;
}
div.test{
border-style:solid solid solid solid;
width:100px;
height:100px;
}
</style>

floate:left  这一句很关键，会让ul横过来，其次要注意最外面那个div，就是包含ul的div宽度不能过短。

需要设计两行，或者复杂的布局，灵活设置div的长宽即可。