一、横向两列方式排列：
在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得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 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 320px; 15 height:120px; 16 padding:15px; 17 float: left; 18 border:1px solid #ccc; 19 margin-right:15px; 20 } 21 .pic{ 22 120px; 23 height:120px; 24 margin-right:10px; 25 float: left; 26 } 27 .pic img{ 28 120px; 29 height:120px; 30 } 31 .txt{ 32 font-size: 12px; 33 } 34 35 .ui-relative{ 36 position: relative; 37 }
结果为：