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

    简介 Go语言是Google出了一个语言,基本概念我就不介绍了, GO语言从原生上支持高并发,并提供了简单的调用方式,我们就重点研究一下它的高并发 进程与线程 在介绍高并发之前,我们需要了解一下我们现 ...

  2. 【JSON】JavaScript删除json元素

    1.json中的两种结构:对象{}和数组[] 2.直接delete json对象[元素名称].

  3. React2

    1.属性 a. 属性和状态是react中数据传递的载体: b. 属性是声明以后不允许被修改的东西: c. 属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取: d ...

  4. datatable刷新表头

    使用jQuery的datatable生成表格数据,当需要改变表头时,调用Table.fnDestroy();再重新创建表头 var oTable = null; function initSettin ...

  5. 还原数据库:The backup set holds a backup of a database other than the existing database……

    还原数据库时报以上错误,解决办法是: 1.删除新建的DB 2.直接右键Databases-->Restore Database 3.在弹出窗口中的To database栏位填写需要新建的DB名称 ...

  6. Centos7安装Mono(以4.6.0)为例

    本文记录mono安装的必须步骤,由于只是一个记录因此操作系统及mono版本都以当前环境为准. 1:环境依赖 操作系统为CentOS7.0,先安装mono依赖的各种组件: yum -y install ...

  7. 查询当前Database下所有Datatable及所有记录数

    DECLARE @TableName varchar(); CREATE TABLE #GetRecordingTempTable([id] [INT] IDENTITY(,) NOT NULL, [ ...

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

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

  9. 这可能是由于服务终结点绑定未使用 HTTP 协议造成的 .这还可能是由于服务器中止了 HTTP 请求上下文

    一个很简单的WCF报这个异常,才发现是 Response的类无法被序列化 因为在Response类里有一个枚举 StatusType,而系统的枚举值是 从0-5,但是数据库里多了一个值为6的记录 这样 ...

  10. 一次完整的HTTP请求所经历的7个步骤

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...