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

最新文章

  1. shell脚本生成限定范围的随机数
  2. Android 监听ScrollView的滑动
  3. iOS之ToolBar定制
  4. python莫名其妙的yield, yield from, yield.send
  5. 2014 Super Training #4 E Paint the Grid Reloaded --联通块缩点+BFS
  6. ***Jquery下Ajax与PHP数据交换
  7. JavaScript中值的真真假假(true and false)
  8. ZOJ-3721 Final Exam Arrangement 贪心
  9. 使用Map辅助拼装树状结构,消除递归调用
  10. SQL中LEFT JOIN 和 inner join 的区别
  11. LitePal 之 DatabaseGenerateException
  12. 【Ural1277】 Cops and Thieves 无向图点连通度问题
  13. .net core在网关中统一配置Swagger
  14. nb-iot简介【转】
  15. BurpSuit添加CA证书拦截HTTPS通信
  16. [Python] numpy.random.rand
  17. 1分钟入门接口自动化框架Karate
  18. json转对象
  19. 使用kerl安装erlang遇到的问题及解决办法-bak
  20. nodejs图片上传

热门文章

  1. Dump中查看DataTime时间方法
  2. html,body的关系
  3. __getattitem_ \__setattitem__\__delitem__
  4. java 中的Scanner
  5. poj 3680 Intervals
  6. JS中匿名函数$(function(){ })和(function(){})()的区别
  7. Linux 内核数据结构:双向链表
  8. 测试dns
  9. 非对称加密算法——RSA
  10. ElasticSearch-5.0安装head插件