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

ul、li分列显示的更多相关文章

  1. ul中li分列显示

    让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈): 2列 <ul> <li style="display:block;float:left;widt ...

  2. html ul li的学习

    DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...

  3. 关于css中使用ul li的一些体会

    参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40 如何修改ul li的显示 ----------------------- ...

  4. ul中li居中显示的table方法

    废话不多,贴代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...

  5. html ul li 显示数据库

    方法1: function insert() { var str=""; var data="你的数据库数据"; str="<ul>< ...

  6. ul li内的文字水平居中显示

    head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...

  7. 浮动后的 <li> 如何在 <ul> 中居中显示?

    百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; ...

  8. ul li设置横排,并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  9. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

随机推荐

  1. 51Nod--1015 水仙花数

    51Nod:  http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1015   1015 水仙花数 基准时间限制:1 秒 空间 ...

  2. RedHat/Centos修改root密码

    Linux主机忘记密码,只要你能接触物理主机都可以修改root密码的!   Redhat6.x 5.x  / Centos6.x  5.x 01.开机-空格/enter 02.e-编辑模式 CentO ...

  3. 使用可视化工具redisclient连接redis

    可视化工具推荐:http://database.51cto.com/art/201505/477692.htm 1.连接redis服务端 1.1 设置连接密码:在redis根目录下,双击redis-c ...

  4. bzoj1208

    1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7589  Solved: 3009[Submit][Sta ...

  5. 红米3 TWRP-3.0.2(android_6.0.1_r72分支)中文版Recovery更新于20161018

    TWRP3.0.2更新简介 TWRP是TeamWin团队https://github.com/TeamWin/Team-Win-Recovery-Project的开源项目,也是Omnirom系统默认的 ...

  6. c# cache 缓存

    System.Web.Caching简介 /// <summary> /// 创建随机字符串 /// </summary> /// <returns></re ...

  7. 【Alpha版本】十天冲刺——日志集合贴

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 Day1 Day2 Day3 Day ...

  8. Structure And Representation Of MIB Object Names - SNMP Tutorial

    30.8 Structure And Representation Of MIB Object Names We said that ASN.1 specifies how to represent ...

  9. Linux ip

    工具/原料 linux系统 putty 方法/步骤   Linux下查看IP一般都是用命令在终端查看了,使用命令行来进行查看.   想要在图形界面查看的朋友也有办法,不过就比较复杂,不如一条命令来得痛 ...

  10. How to use FTP

    Forward from: https://www.server-world.info/en/note?os=CentOS_7&p=ftp&f=2 Thanks for your sh ...