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> < ...
随机推荐
- p2p网贷平台设计简析
以我之前主持开发的一个商业产品:p2p网贷为例进行分析.整个的概况,可以参见:www.huixinp2p.com(目的只会技术交流) 界面可以直接参考前期博客:http://www.cnblogs.c ...
- 恢复 Windows 7 的“回到父目录”按钮
Windows 7 使用以来很多方面一直不习惯,特别是让我无比纠结的”回到父目录“ 按钮从资源管理器中消失了. 不能不说这是一个失败! 很多时候,Win 7 地址栏中自以为是的显示的很多层目录层次的面 ...
- 移动UI设计
移动应用UI设计模式 第二版 导航:跳板式,菜单式,选项卡式(微信)等 表单:登录表单,多步骤表单(递进式),计算表单,搜索表单,长表单等 表格:无表头表格,概览+数据型表格等 搜索:隐式搜索(滴滴打 ...
- C++异常处理
引言 异常,让一个函数可以在发现自己无法处理的错误时抛出一个异常,希望它的调用者可以直接或者间接处理这个问题.而传统错误处理技术,检查到一个局部无法处理的问题时: 1.终止程序(例如atol,atoi ...
- Redis集群(三):主从配置一
一.本文目的 Redis的主从配置分为两篇文章,第一篇主要介绍了Redis主从配置的搭建过程及使用,第二篇主要说明各种情况下Redis主从状态,如Master挂掉,Slaver挂掉, ...
- Linux下常用SVN命令
1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain --u ...
- telnet建立http连接获取网页HTML内容
利用telnet可以与服务器建立http连接,获取网页,实现浏览器的功能.它对于需要对http header进行观察和测试到时候非常方便.因为浏览器看不到http header. 步骤如下: 1. 运 ...
- 教你一招:Excel中使用MID函数获取身份证中的出生年月日
MID字符串函数,作用是从一个字符串中截取出指定数量的字符 MID(text, start_num, num_chars) text被截取的字符 start_num从左起第几位开始截取(用数字表达 ...
- 架构师养成记--4.volatile关键字
volatile修饰的变量可在多个线程间可见. 如下代码,在子线程运行期间主线程修改属性值并不对子线程产生影响,原因是子线程有自己独立的内存空间,其中有主内存中的变量副本. public class ...
- Architectural Model - SNMP Tutorial
30.3 Architectural Model Despite the potential disadvantages, having TCP/IP management software oper ...