将ul+li 分两列显示(横向显示)的方法
将ul+li 分两列显示(横向显示)的方法
发布时间:2016-12-27 来源:查字典编辑
摘要:目的很简单:有一个ul>li列表,默认为单列显示,把它变为两列显示。方法1,使用DIV+CSS代码:.mycode{width:300px;...

目的很简单:有一个 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>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

<li>ABC</li>

</ul>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类