一、横向两列方式排列:

在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得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横向排列的更多相关文章

  1. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  2. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  3. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  5. CSS中如何将li横向排列

    直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...

  6. android中RecyclerView控件的列表项横向排列

    本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...

  7. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  8. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

    昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

随机推荐

  1. [Hackerrank]时间转换Time Conversion

    题目链接 大致要求是说给定一个十二小时制的时间,给出它的二十四小时制的形式. 输入格式:hh:mm:ssAM 或者 hh:mm:ssPM,其中01≤hh≤12,00≤mm,ss≤59 思路 判断字符串 ...

  2. Eclipse编辑jsp卡死解决方案

    使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...

  3. Java概述--Java开发实战经典

    1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...

  4. jvm内存参数配置

    qunar国内旗舰店master  (4核 8G) qunar国内旗舰店hub(4核 8G) qunar国内旗舰店provider(4核 8G)

  5. 线程协作-CountDownLatch

    CountDownLatch允许一个或多个线程等待其他线程完成操作.

  6. Flex State

    在Flex 程序中,引入了状态设计的概念.在一个程序中,按照功能的需求,将界面切分成相对独立的部分.运行过程中,随着用户交互,界面在各个部分之间切换.比如在购物车程序中,登录界面.选购商品界面.购物车 ...

  7. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  8. Debian、Ubuntu 源列表说明

    转载:http://forum.ubuntu.org.cn/viewtopic.php?t=366506 概貌: 源列表主文件为 /etc/apt/sources.list,另兼取 /etc/apt/ ...

  9. C# 7 新特性-2

    在之前的C# 7 新特性博客中,我们谈到了Tuples,Record Type和Pattern Matching.这些都是C#新特性中最可能出现的.在本博客中,我们会提到更多的一些特性,虽然这些特性不 ...

  10. Silverlight游戏设计(Game Design):(十四)练习用游戏素材资源的获取及相关工具使用心得 --转

    Silverlight游戏设计(Game Design):(十四)练习用游戏素材资源的获取及相关工具使用心得 通过前6节的Demo制作演示,大家应该已经相当熟悉这款Silverlight-2D游戏场景 ...