1861资源网：您身边、安全、高速、放心的专业下载站！
手机站 软件专题
1861资源网
热门搜索： 请搜索 软件： 相关信息 照明商店 搜索 教程：相关 爆裂点 照明商店 请输入 相关： 软件
您当前位置：首页 > 软件教程 > 代码特效 >> css让文字横排显示 ul+li 分两列显示(横向显示)的方法

css让文字横排显示 ul+li 分两列显示(横向显示)的方法

    目的很简单：有一个 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> 
代码特效 发布: 2022-04-29   修改: 2024-04-18   阅:   评:   点击报错反馈
上一篇 : img图片不存在时显示默认图片
下一篇 : 点击文字将文字自动添加到文本框中
相关文章
本类最新发布
本类推荐
本类评论
留言与评论（共有 0 条评论）
验证码：
本类软件分类
文章总排行
文章月排行
装机必备软件
全站下载总排行

1861资源网

http://www.zywlyy.cn/

   |

1861资源网 软件下载

虚假投诉

免费注册

关于本站

联系我们

软件下载

驱动下载

安卓软件

苹果软件

安卓游戏

苹果游戏

mac下载

系统工具

编程软件

本站留言

单机游戏

软件教程

1861资源网

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢网络科技公司技术支持