ul、li分列显示
2024-10-16 11:49:36
目的很简单:有一个 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>
上面的是分两列显示,
ul宽度为width:400px;
li宽度为width:190px;
如果想要分成自己想要的n列,则只需要修改ul的宽度和li的宽度,li的宽度的n倍是ul的长度.
最新文章
- shell脚本生成限定范围的随机数
- Android 监听ScrollView的滑动
- iOS之ToolBar定制
- python莫名其妙的yield, yield from, yield.send
- 2014 Super Training #4 E Paint the Grid Reloaded --联通块缩点+BFS
- ***Jquery下Ajax与PHP数据交换
- JavaScript中值的真真假假(true and false)
- ZOJ-3721 Final Exam Arrangement 贪心
- 使用Map辅助拼装树状结构,消除递归调用
- SQL中LEFT JOIN 和 inner join 的区别
- LitePal 之 DatabaseGenerateException
- 【Ural1277】 Cops and Thieves 无向图点连通度问题
- .net core在网关中统一配置Swagger
- nb-iot简介【转】
- BurpSuit添加CA证书拦截HTTPS通信
- [Python] numpy.random.rand
- 1分钟入门接口自动化框架Karate
- json转对象
- 使用kerl安装erlang遇到的问题及解决办法-bak
- nodejs图片上传
热门文章
- Dump中查看DataTime时间方法
- html,body的关系
- __getattitem_ \__setattitem__\__delitem__
- java 中的Scanner
- poj 3680 Intervals
- JS中匿名函数$(function(){ })和(function(){})()的区别
- Linux 内核数据结构:双向链表
- 测试dns
- 非对称加密算法——RSA
- ElasticSearch-5.0安装head插件