ul和li简单语句实现DIV+CSS分两列(多列)布局显示 不指定

jed , 2008-9-5 10:55 , 代码编程 , 评论(0) , 阅读(6161) , Via 本站原创 | |
显然:UL+LI在布局上比table灵活得多。

比较分两列或者多列显示:

table:你需要在服务器上写一大堆代码判断是不是需要换行,或者切分是不是准确

DIV:你只需要定义好css,剩下的做事情叫交给浏览器吧。

最简单的代码:



<style type="text/css">  
    .mycode{ width:300px; height:74px; float:left;}    
    .mycode ul{ width:280px;}    
    .mycode li{ width:100px; float:left; display:block;}    
</style>  
<div class="mycode">  
    <ul>  
        <li>博客小子</li>  
        <li>博客小子</li>  
        <li>博客小子</li>  
        <li>博客小子</li>  
        <li>博客小子</li>  
        <li>博客小子</li>  
    </ul>  
</div>  




不用多说,这个是最精简的代码,请根据你需要修改!
Tags:
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]