无序列表li横向排列的方法.

一、横向单边排列：

在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得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随内容而定），如下：