将 ul+li 分两列显示的方法

来源:互联网 发布:电子屏软件图标 编辑:程序博客网 时间:2024/04/20 04:25
目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示。方法1,使用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><ul><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li></ul></div>方法2,直接使用CSS控制<style type="text/css">.list{width:400px;overflow:hidden;zoom:1;border:1px solid #ccc}.list li{float:left;width:190px;padding:5px}</style><ul class="list"><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li></ul>

原创粉丝点击