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

    Q:workspace没有显示变量的值 A:这是因为子程序里的变量是局部变量,他们的作用域就是子函数内部,会在流程控制回到主调函数前被系统自动释放掉,所以,一旦子程序运行完,你是不可能再查看子程序里的 ...

  2. 如何重复使用IEnumerable对象来枚举?

    我在2011年9月发表了一个问问,http://q.cnblogs.com/q/28679/. 没人理我. 自己看了一下,尝试自己解决: 原问题: MSDN: 在非泛型集合中,您可以在调用 Reset ...

  3. FPGA与simulink联合实时环路系列—开篇

    FPGA与simulink联合实时环路系列—开篇 作为网络上第一个开源此技术,笔者迫不及待地想将此技术分享出来,希望大家多多支持.笔者从2011年接触FPGA以来,从各个方面使用FPGA,无论是控制. ...

  4. session过期返回登录页面跳出frame

    session 过期返回登录页面 方法1, HttpSession session = request.getSession(); String LOGIN_ID = (String) session ...

  5. 数据结构图文解析之:树的简介及二叉排序树C++模板实现.

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  6. RabbitMQ headers Exchange

    Headers Exchange headers也是一种交换机类型,但是在rabbitmq官网中的教程中并没有说到.资料也很少,但是找一找总会有的. headers与direct的模式不同,不是使用r ...

  7. Publishing failed with multiple errors 异常

    Publishing failed with multiple errors 在使用eclipse发布项目时不能自动生成class文件,且无法启动调试的Tomcat服务.启动过程提示 以上 异常 解决 ...

  8. XPath函数——字符串函数(转载)

    本文是转载的,原文网址:http://www.cnblogs.com/zhaozhan/archive/2010/01/17/1650242.html 字符串函数主要用来处理字符串.字符串函数主要包括 ...

  9. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  10. ubuntu14.04 安装pip

    参考链接: 1.http://www.liquidweb.com/kb/how-to-install-pip-on-ubuntu-14-04-lts/ 2.http://idroot.net/tuto ...