无序列表li横向排列
本文转载自： https://www.cnblogs.com/laogai/p/3406073.html 作者：laogai 转载请注明该声明。
一、横向两列方式排列：
在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得li的css样式设置为:float：left的形式即可，li会依次从最左边开始并列对齐，
例如：
HTML中：
1 <ul class="ui"> 2 <li><a href="#" >首页</a></li> 3 <li><a href="#">登录</a></li> 4 <li><a href="#">注册</a></li> 5 <li><a href="#">服务大厅</a></li> 6 <li><a href="#">需求大厅</a></li> 7 </ul>
CSS:
1 .ui{
2 width:700px;
3 height:50px;
4 list-style: none;
5 margin:0;
6 padding:0;
7 }
8 .ui li{
9 width:70px; margin:0 10px;
10 float: left;/*该处换为display:inline-block;同样效果*/11 12 }
13
14 .ui li a{
15 width:70px;
16 height:50px;
17 padding:0 20px;
18 font-size: 12px;
19 line-height:50px;
20 background: red;
21 display: inline-block;
22 }
显示结果：
但是在有些情况下需要列表以两列的形式分开并列一行，
此时，可以有以下两种方式来布局：
方法一：
当设置li的属性为：display:inline-block时:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 .ui{ 7 width:700px;
8 height:50px;
9 list-style: none;
10 margin:0;
11 padding:0;
12 }
13 .ui li{14 width:70px;
15 display: inline-block;
16 margin:0 10px;
17 }
18
19 .ui li a{20 width:70px;
21 height:50px;
22 padding:0 20px;
23 font-size: 12px;
24 line-height:50px;
25 background: red;
26 display: inline-block;
27 }
28 .right{29 float: right;
30 width:70px;
31 }
32
33 </style>
34 </head>
35 <body>
36 <ul class="ui">
37 <li><a href="#" >首页</a></li>
38 <li><a href="#">登录</a></li>
39 <li><a href="#">注册</a></li>
40 <li class="right"><a href="#">服务大厅</a></li>
41 <li class="right"><a href="#">需求大厅</a></li>
42 </ul>
43 </body>
44 </html>
方法二：
利用id增加权重使想要浮动在右边的li有float：right属性;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 .ui{ 7 width:700px;
8 height:50px;
9 list-style: none;
10 margin:0;
11 padding:0;
12 }
13 .ui li{14 width:70px;
15 display: inline-block;
16 margin:0 10px;
17 }
18
19 .ui li a{20 width:70px;
21 height:50px;
22 padding:0 20px;
23 font-size: 12px;
24 line-height:50px;
25 background: red;
26 display: inline-block;
27 }
28 #rr,#re{29 float: right;
30 }
31
32 </style>
33 </head>
34 <body>
35 <ul class="ui">
36 <li><a href="#" >首页</a></li>
37 <li><a href="#">登录</a></li>
38 <li><a href="#">注册</a></li>
39 <li id="rr"><a href="#">服务大厅</a></li>
40 <li id="re"><a href="#">需求大厅</a></li>
41 </ul>
42 </body>
43 </html>
最后，需要注意的是，在浮动的时候，最后的结果与正常部分两列的情况下的顺序有所不同，例如
上面的结果正常是：“首页”到“需求大厅”依次排列，但是在浮动之后却变成了“服务大厅”是最后一
个，是因为在“服务大厅”右浮动时，它已经将区域最右侧占据，当下一个元素“需求大厅”再右浮动时，
由于最右侧已经被签一个占据，所以它只有在签一个元素的左侧，因此，顺序会是倒序的。就是说如
果用left对ABCDE排列，那么用right之后结果就会变成：EDCBA。
二、在固定宽度下有间隔的排列
在外围区域宽度固定的情况下，要想使ul中的li内容有一定间隔的横向排列，只要不设置在x方向上
的overflow:hidden;而整个ul为：margin-right:-12px（12随内容而定），如下：
HTML中：
1 <div class="grid"> 2 <div class="ui-relative"> 3 <ul class="ui-ul"> 4 <li> 5 <div class="pic"><a href="#"><img src=" http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div> 6 <h3> 7 <a href="#" class="tit">猪八戒</a> 8 </h3> 9 <div class="txt">TA 出售的服务(好评率99.51%)</div> 10 </li> 11 <li> 12 <div class="pic"><a href="#"><img src=" http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div> 13 <h3> 14 <a href="#" class="tit">猪八戒</a> 15 </h3> 16 <div class="txt">TA 出售的服务(好评率99.51%)</div> 17 </li> 18 <li> 19 <div class="pic"><a href="#"><img src=" http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div> 20 <h3> 21 <a href="#" class="tit">猪八戒</a> 22 </h3> 23 <div class="txt">TA 出售的服务(好评率99.51%)</div> 24 </li> 25 </ul> 26 </div> 27 </div>
CSS:
1 .grid{
2 width:1100px;
3 margin:0 auto;
4 }
5 .ui-ul{
6 height:auto;
7 overflow-y: hidden;;
8 list-style: none;
9 margin-right:-15px;
10 margin-left:0;
11 padding:0;
12 }
13 .ui-ul li{
14 width:320px;
15 height:120px;
16 padding:15px;
17 float: left;
18 border:1px solid #ccc;
19 margin-right:15px;
20 }
21 .pic{
22 width:120px;
23 height:120px;
24 margin-right:10px;
25 float: left;
26 }
27 .pic img{
28 width:120px;
29 height:120px;
30 }
31 .txt{
32 font-size: 12px;
33 }
34
35 .ui-relative{
36 position: relative;
37 }
结果为：
无序列表li横向排列相关推荐
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- html无序列表只能横着排吗,[三地连线走势图]css 怎样让无序列表 横着排列
大家好,本文问题是[三地连线走势图]css 怎样让无序列表 横着排列,由专家五湖彩解答.下面是具体回答内容: html> *{margin: 0; padding: 0;} ul, li{lis ...
- 解决ul的li横向排列换行的问题
解决ul的li横向排列换行的问题 参考文章: (1)解决ul的li横向排列换行的问题 (2)https://www.cnblogs.com/sapho/p/5736491.html 备忘一下.
- 无序列表li去掉标志，文本不根据标记对齐
大部分项目的列表都不需要标志,只要给ul添加一个list-style:none的属性即可:如果要把文本对齐标志,则添加list-style-position: inside;为了看着比较清晰,一般会把 ...
- 如何修改无序列表li的点和文字之间的距离？
将list-style-position属性设置为outside 才可以 然后使用 text-indent 如果用inside就会前缀跟着一起动 如果需要对整坨的间距都调整 对外层调整即可
- HTML无序列表布局
1.图片和文字在同一行 <img src="image/icon-youxiang.png" alt="" class="dis_ver&quo ...
- html列表--有序列表、无序列表、定义列表
1.有序列表 有序列表,顾名思义就是一个有顺序的列表 ol(ordered lists) : 有序列表 li(list item): 列表项目 这是一个最普通的有序列表: 有序列表中两个常用的属性:t ...
- 有序列表、无序列表、自定义列表
有序列表.无序列表.自定义列表 1.有序列表 <!--有序列表--><ol type="A" start="3"><li>有 ...
- HTML之有序列表、无序列表
目录 有序列表 无序列表 有序列表 有序列表(可表示步骤,顺序,排名等)(两个元素,二者之间为父子关系,li必须包裹在ol内,是order list,list item缩写.w3c标准:ol内只能嵌套 ...
最新文章
- linux lua 交叉编译,交叉编译 XXX含义与作用
- ［Linux］从控制台一次读取一个字符，无需等待回车键
- MIMIC 以太坊医疗项目开发(6)Web3智能合约API
- UE3 ExampleGame Android版无法运行解决方案
- Xamarin.Android SharedPreferences的使用方法
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现按部门组织机构设置权限...
- android动画Rotate
- django 基础框架学习 (一)
- hashmap是线程安全的吗?怎么解决?_线程安全及三种解决方案
- 关于控件开发的几点意见
- WHILE (Transact-SQL)
- 单链表以及双向链表的操作
- 机器学习基石-林轩田-第一周笔记
- 学习笔记（4):Google开发专家带你学 AI：入门到实战（Keras/Tensorflow）（附源码）-深度学习“四件套”：数据、模型、损失函数与优化器...
- idea2020.1.1 窗口显示 Outdated version. 完美解决
- 盛世昊通解析为什么你买不到想要的新能源汽车
- 试卷模板 html,一年级语文试卷模板
- 【计算机网络】第四部分 网络层(21) 地址映射、差错报告和多播
- 程序员学c语言吗,为什么程序员要学C语言
- 计算机每次网络重插才能启动,为何电脑开机后再插网线才能用_每次开机都要重插网线的解决方法...