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

最新推荐文章于 2023-05-30 17:20:23 发布

科比不来it

最新推荐文章于 2023-05-30 17:20:23 发布

阅读量8.9k

点赞数

分类专栏： CSS/html

本文为博主原创文章博主微信：453676130，未经博主允许不得转载。

本文链接：https://blog.csdn.net/river131/article/details/8821516

版权

CSS/html 专栏收录该内容

35 篇文章

订阅专栏

本文介绍两种使用CSS实现ul>li列表从单列变为双列显示的方法。第一种方法利用DIV+CSS进行布局调整；第二种方法直接通过CSS属性控制列表项浮动实现双列效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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