目的很简单:有一个 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. 【.NET】Nuget包,把自己的dll放在云端

    //发布自己的nuget包,1.自己的api KEY,2.自己的类库,3.nuget打包工具https://npe.codeplex.com/releases/view/620126          ...

  2. 自定义View其实很简单系列1-12

    作者: AigeStudio  http://blog.csdn.net/aigestudio 说明:文中的1/12表示12篇中的第1篇, 1/6=2/12表示12篇中的第2篇,其它类似. 自定义控件 ...

  3. bzoj3033

    欧拉路,这题好神啊QAQ 显然选择的方案数有2^n种,因为每个点度数都为二所以肯定是一条欧拉路, 第二问直接爆搜即可... ----然而我并没有想到---- 第一问我推出来了(别问我怎么推的,我说我是 ...

  4. Java内存模型深度解读

    Java内存模型规范了Java虚拟机与计算机内存是如何协同工作的.Java虚拟机是一个完整的计算机的一个模型,因此这个模型自然也包含一个内存模型——又称为Java内存模型. 如果你想设计表现良好的并发 ...

  5. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  6. 自然语言27_Converting words to Features with NLTK

    https://www.pythonprogramming.net/words-as-features-nltk-tutorial/ Converting words to Features with ...

  7. ArcGIS Server开发教程系列(3)切片

    切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...

  8. CentOS添加163源

    1.备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-B ...

  9. live555库中的testH264VideoStreamer实例

    1.h264文件的推送 testH264VideoStreamer.cpp文件的开头就定义了 char const* inputFileName = "test.264"; 后面接 ...

  10. Zabbix3 agent端安装(二)

    1.基础环境准备 安装zabbix的yum源,这里有必要提一点,阿里的yum源已经提供了zabbix3.0 1.1.yum源配置 rpm -ihv http://mirrors.aliyun.com/ ...