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> < ...
随机推荐
- Mongodb学习笔记一(Mongodb环境配置)
Mongodb学习 说明: MongoDB由databases组成,database由collections组成,collection由documents组成,document由fileds组成.Mo ...
- Mongodb学习笔记二(Mongodb基本命令)
第二章 基本命令 一.Mongodb命令 说明:Mongodb命令是区分大小写的,使用的命名规则是驼峰命名法. 对于database和collection无需主动创建,在插入数据时,如果databas ...
- 浅谈Struts2
学过SSH框架很长一段时间了,一直没有很系统的总结一下,这里先简单谈谈Struts2. 为什么要用Struts2? 这里列举一些Servlet的缺点: 1.每写一个servlet在web.xml中都要 ...
- 【.NET】Nuget包,把自己的dll放在云端
//发布自己的nuget包,1.自己的api KEY,2.自己的类库,3.nuget打包工具https://npe.codeplex.com/releases/view/620126 ...
- Android只能动态注册的广播Action
只能动态注册的广播(部分): android.intent.action.SCREEN_ON android.intent.action.SCREEN_OFF android.intent.actio ...
- for循环嵌套执行效率
今天做项目时遇到一个for循环的嵌套问题,一个循环次数多,一个次数少,怎样设计效率较高. 想起以前笔试时遇到过这个问题,当时由于时间仓促,没有细想,今天在实际代码中遇到这么问题,于是动笔算了下. 设两 ...
- struts2+spring+hibernate(SSH)框架的搭建和总结
SSH框架:struts2+spring+hibernate,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. struts2+spring+hibernat ...
- BZOJ4520 [Cqoi2016]K远点对
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- apache 多网站日志配置禁止ip访问
#禁止IP访问服务器AcceptFilter http noneAcceptFilter https none<VirtualHost 192.168.1.220>ServerName 1 ...
- 11月7日上午PHP会话控制(session和cookie)、跨页面传值
1.session 登录上一个页面以后,长时间没有操作,刷新页面以后需要重新登录. 特点:(1)session是存储在服务器: (2)session每个人(登陆者)存一份: (3)session ...