无序列表li横向排列
一、横向两列方式排列：
在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得li的css样式设置为:float：left的形式即可，li会依次从最左边开始并列对齐，
例如：
HTML中：
<ul class="ui">
<li><a href="#" >首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">服务大厅</a></li>
<li><a href="#">需求大厅</a></li>
</ul>
CSS:
.ui{
width:700px;
height:50px;
list-style: none;
margin:;
padding:;
}
.ui li{
width:70px;
margin:0 10px;
float: left;/*该处换为display:inline-block;同样效果*/
}
.ui li a{
width:70px;
height:50px;
padding:0 20px;
font-size: 12px;
line-height:50px;
background: red;
display: inline-block;
}
显示结果：
但是在有些情况下需要列表以两列的形式分开并列一行，
此时，可以有以下两种方式来布局：
方法一：
当设置li的属性为：display:inline-block时:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ui{
width:700px;
height:50px;
list-style: none;
margin:0;
padding:0;
}
.ui li{
width:70px;
display: inline-block;
margin:0 10px;
} .ui li a{
width:70px;
height:50px;
padding:0 20px;
font-size: 12px;
line-height:50px;
background: red;
display: inline-block;
}
.right{
float: right;
width:70px;
} </style>
</head>
<body>
<ul class="ui">
<li><a href="#" >首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li class="right"><a href="#">服务大厅</a></li>
<li class="right"><a href="#">需求大厅</a></li>
</ul>
</body>
</html>
方法二：
利用id增加权重使想要浮动在右边的li有float：right属性;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ui{
width:700px;
height:50px;
list-style: none;
margin:0;
padding:0;
}
.ui li{
width:70px;
display: inline-block;
margin:0 10px;
} .ui li a{
width:70px;
height:50px;
padding:0 20px;
font-size: 12px;
line-height:50px;
background: red;
display: inline-block;
}
#rr,#re{
float: right;
} </style>
</head>
<body>
<ul class="ui">
<li><a href="#" >首页</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li id="rr"><a href="#">服务大厅</a></li>
<li id="re"><a href="#">需求大厅</a></li>
</ul>
</body>
</html>
最后，需要注意的是，在浮动的时候，最后的结果与正常部分两列的情况下的顺序有所不同，例如
上面的结果正常是：“首页”到“需求大厅”依次排列，但是在浮动之后却变成了“服务大厅”是最后一
个，是因为在“服务大厅”右浮动时，它已经将区域最右侧占据，当下一个元素“需求大厅”再右浮动时，
由于最右侧已经被签一个占据，所以它只有在签一个元素的左侧，因此，顺序会是倒序的。就是说如
果用left对ABCDE排列，那么用right之后结果就会变成：EDCBA。
二、在固定宽度下有间隔的排列
在外围区域宽度固定的情况下，要想使ul中的li内容有一定间隔的横向排列，只要不设置在x方向上
的overflow:hidden;而整个ul为：margin-right:-12px（12随内容而定），如下：
HTML中：
<div class="grid">
<div class="ui-relative">
<ul class="ui-ul">
<li>
<div class="pic"><a href="#"><img src=" http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>
<h3>
<a href="#" class="tit">猪八戒</a>
</h3>
<div class="txt">TA 出售的服务(好评率99.51%)</div>
</li>
<li>
<div class="pic"><a href="#"><img src=" http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>
<h3>
<a href="#" class="tit">猪八戒</a>
</h3>
<div class="txt">TA 出售的服务(好评率99.51%)</div>
</li>
<li>
<div class="pic"><a href="#"><img src=" http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>
<h3>
<a href="#" class="tit">猪八戒</a>
</h3>
<div class="txt">TA 出售的服务(好评率99.51%)</div>
</li>
</ul>
</div>
</div>
CSS:
.grid{
width:1100px;
margin:0 auto;
}
.ui-ul{
height:auto;
overflow-y: hidden;;
list-style: none;
margin-right:-15px;
margin-left:0;
padding:0;
}
.ui-ul li{
width:320px;
height:120px;
padding:15px;
float: left;
border:1px solid #ccc;
margin-right:15px;
}
.pic{
width:120px;
height:120px;
margin-right:10px;
float: left;
}
.pic img{
width:120px;
height:120px;
}
.txt{
font-size: 12px;
}
.ui-relative{
position: relative;
}
结果为：
无序列表li横向排列的更多相关文章
- 无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- android中RecyclerView控件的列表项横向排列
本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...
- 解决ul的li横向排列换行的问题
1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
- 菜单制作:ul li横向排列
CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...
随机推荐
- 【计算几何】【凸包】bzoj1670 [Usaco2006 Oct]Building the Moat护城河的挖掘
#include<cstdio> #include<cmath> #include<algorithm> using namespace std; #define ...
- [CF160D]Edges in MST
[CF160D]Edges in MST 题目大意: 一个\(n(n\le10^5)\)个点,\(m(m\le10^5)\)条边的连通图.对于图中的每条边,判断它与该图最小生成树的关系: 在该图所有的 ...
- 1.4(Spring MVC学习笔记)JSON数据交互与RESTful支持
一.JSON数据交互 1.1JSON简介 JSON(JavaScript Object Notation)是一种数据交换格式. 1.2JSON对象结构 {}代表一个对象,{}中写入数据信息,通常为ke ...
- 收藏起来，史上最全的 MySQL 高性能优化实战总结！
转自:https://mp.weixin.qq.com/s/sRsJzFO9dPtKhovJNWN3Dg 一.前言 MySQL 对于很多 Linux 从业者而言,是一个非常棘手的问题,多数情况都是因为 ...
- 杂谈PID控制算法——第二篇：调·三个量
上面一篇文章讲了一下PID算法中的三个常量大致的在PID算法中起的一个作用,但在实际的使用中,究竟应该如何调节(或者用更加专业的话说是整定)PID控制算法的三个.首先可以将KP,KI,KD三个常量全部 ...
- [Lync]lync同步通讯簿
概述 在客户现场部署lync的时候,突然发现新安装的lync客户端,搜索联系人功能无法使用,而将lync客户端安装后,隔一段时间后,又可以查询了,发现可能是数据没有同步的原因. 解决方案 客户端地址簿 ...
- Android ProgressBar手动控制开始和停止
这两天有个需求,点击按钮从SD卡解压压缩包,并读取压缩包内txt文档内容,然后在街面上显示出来.毕竟IO操作很耗时,如果文件较大会花费不少时间.所以,在处理数据的时候能给个进度就好了.我们通常的做法就 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- XPath注入技术综述
一次完整的 XPath 注入攻击应该包括使用特殊构造的查询来提取一个 XML 数据库内的 数据或者信息.作为一门新的技术,XPath 注入在一定程度上和 SQL 注入漏洞有着惊人的相 似之处,通过下面 ...
- php漏洞挖掘与代码审计方法
在甲方公司做代码审计一般还是以白盒为主,漏洞无非这么几类,XSS.sql注入.命令执行.上传漏洞.本地包含.远程包含.权限绕过.信息泄露等. 1.xss + sql注入 其中占大头的自然是XSS与SQ ...