ul、li分列显示
目的很简单:有一个 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分列显示的更多相关文章
- ul中li分列显示
让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈): 2列 <ul> <li style="display:block;float:left;widt ...
- html ul li的学习
DIV+CSS里,我们用得最多的就是ul li来显示数据,如新闻按钮等. <div id="menu"> <ul> <li><a href ...
- 关于css中使用ul li的一些体会
参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40 如何修改ul li的显示 ----------------------- ...
- ul中li居中显示的table方法
废话不多,贴代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...
- html ul li 显示数据库
方法1: function insert() { var str=""; var data="你的数据库数据"; str="<ul>< ...
- ul li内的文字水平居中显示
head><style rel="stylesheet" type="text/css" >#top{height:140px;}#top u ...
- 浮动后的 <li> 如何在 <ul> 中居中显示?
百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; ...
- ul li设置横排,并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
随机推荐
- 51Nod--1015 水仙花数
51Nod: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1015 1015 水仙花数 基准时间限制:1 秒 空间 ...
- RedHat/Centos修改root密码
Linux主机忘记密码,只要你能接触物理主机都可以修改root密码的! Redhat6.x 5.x / Centos6.x 5.x 01.开机-空格/enter 02.e-编辑模式 CentO ...
- 使用可视化工具redisclient连接redis
可视化工具推荐:http://database.51cto.com/art/201505/477692.htm 1.连接redis服务端 1.1 设置连接密码:在redis根目录下,双击redis-c ...
- bzoj1208
1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 7589 Solved: 3009[Submit][Sta ...
- 红米3 TWRP-3.0.2(android_6.0.1_r72分支)中文版Recovery更新于20161018
TWRP3.0.2更新简介 TWRP是TeamWin团队https://github.com/TeamWin/Team-Win-Recovery-Project的开源项目,也是Omnirom系统默认的 ...
- c# cache 缓存
System.Web.Caching简介 /// <summary> /// 创建随机字符串 /// </summary> /// <returns></re ...
- 【Alpha版本】十天冲刺——日志集合贴
No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 Day1 Day2 Day3 Day ...
- Structure And Representation Of MIB Object Names - SNMP Tutorial
30.8 Structure And Representation Of MIB Object Names We said that ASN.1 specifies how to represent ...
- Linux ip
工具/原料 linux系统 putty 方法/步骤 Linux下查看IP一般都是用命令在终端查看了,使用命令行来进行查看. 想要在图形界面查看的朋友也有办法,不过就比较复杂,不如一条命令来得痛 ...
- How to use FTP
Forward from: https://www.server-world.info/en/note?os=CentOS_7&p=ftp&f=2 Thanks for your sh ...