目的很简单:有一个 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. Android开发自学笔记(Android Studio)—4.界面编程与View组件简单介绍

    一.引言 Android应用开发最重要的一份内容就是界面的开发,无论你程序包含的内容多么优秀,如若没有一个良好的用户交互界面,最终也只是会被用户所遗弃.Android SDK提供了大量功能丰富的UI组 ...

  2. SQL数据库分配权限

    打开SQL-Server管理工具->安全性->登陆名->右键(新建登陆名) 输入相应的信息(这里要去掉强制实施密码策略,强制密码过期,否则用户在下次登录时必须修改密码) 用户映射-& ...

  3. Matlab2015基本语句语法04

    1. 输入.输出.格式化输出 1) 读入数据:input >>number: num=input('Give me your number: '); >>string: str ...

  4. 软件工程(FZU2015)赛季得分榜,第三回合

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...

  5. 项目分析_xxoo-master

    项目介绍:使用java1.5的原生xml操作类实现 对象<-->xml字符串的相互转化 项目分析:主要分为是三个部分 1.容器类:AbstractContainer         存储x ...

  6. php环境的搭建

    Windows下php作为Apache的子模块加载 1.安装Apache后,找到httpd.conf文件,加入下列三行 #将php作为Apache的一个模块来处理LoadModule php5_mod ...

  7. 解决:/bin/sh: 1: /home/**/custom_app.sh: Permission denied错误

    出现如下错误,一般是执行权限不够. /bin/sh: : /home/custom_app.sh: Permission denied 解决方法是:cd 到此文件目录,对提示的文件赋予可执行权限或读写 ...

  8. RabbitMQ Topic exchange

    Topic exchange topic与之前的每个类型都不同(ps:废话每个都是不同的).Topic解决了我们另一个需求.举个例子,有一个做资讯的公司,他们会收集各种科技公司的动态并且第一时间转发出 ...

  9. SourceTree推送时,增加额外的远程仓库,不用每次都自定义粘贴复制网络

    一.命令行添加 二.软件界面可以查看到结果 更新,以上是代码添加了远程仓库,最近,找到了不用代码,直接在文件夹里写地址来添加的方式.直接上图了.

  10. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...