目的很简单:有一个 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. 关于Interception框架

    对于OOP来说,是个树形结构,如果要实现多个子数之间的共享服务,例如很多子树都用到日志服务,这时候AOP的横切关注 cross cutting concerns就非常有用了.如果要使每个类具备一项功能 ...

  2. 用机器名访问和用Localhost访问时在IE中的区别(备忘)

    meta中未指定文档模式的时候, localhost访问文档模式默认是Edge 机器名访问时文档模式默认是IE7 <head>中添加 <meta http-equiv="X ...

  3. c# 备份数据库恢复数据库

    /// <summary> /// 对数据库的备份和恢复操作,Sql语句实现 /// </summary> /// <param name="cmdText&q ...

  4. RabbitMQ headers Exchange

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

  5. [bigdata] 使用Flume hdfs sink, hdfs文件未关闭的问题

    现象: 执行mapreduce任务时失败 通过hadoop fsck -openforwrite命令查看发现有文件没有关闭. [root@com ~]# hadoop fsck -openforwri ...

  6. elk系列4之kibana图形化操作

    preface 我们都搭建了ELK系统,且日志也能够正常收集的时候,那么就配置下kibana.我们可以通过kibana配置柱状图,趋势图,统计图,圆饼图等等各类图.下面就拿配置统计图和柱状图为例,结合 ...

  7. linux下centos的网络连接

  8. 《Python核心编程》18.多线程编程(三)

    18.6使用threading模块 #!/usr/bin/env python # -*- coding:utf-8 -*- """从Thread类中派生出一个子例,创建 ...

  9. bootstrap 水平表单

    <form class="form-horizontal" role="form"> <div class="form-group& ...

  10. ajax 提交表单文件上传

    <form action="" method="post" enctype="multipart/form-data" id=&quo ...