将ul+li 分多列显示信息(横向显示信息)的方式

2021-03-10 05:12 jianzhan
目地很简易：有1个 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>

为您推荐