一、横向两列方式排列：

在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得li的css样式设置为:float：left的形式即可，li会依次从最左边开始并列对齐，

例如：

HTML中：

1 
     
      2     
      
首页
3     
      
登录
4     
      
注册
5     
      
服务大厅
6     
      
需求大厅
7 
     

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  2  3  4      5     34 35 36 
     
      37     
      
首页
38     
      
登录
39     
      
注册
40     
      
服务大厅
41     
      
需求大厅
42 
     
43 44 

方法二：

利用id增加权重使想要浮动在右边的li有float：right属性;

1  2  3  4      5     33 34 35 
     
      36     
      
首页
37     
      
登录
38     
      
注册
39     
      
服务大厅
40     
      
需求大厅
41 
     
42 43 

最后，需要注意的是，在浮动的时候，最后的结果与正常部分两列的情况下的顺序有所不同，例如

上面的结果正常是：“首页”到“需求大厅”依次排列，但是在浮动之后却变成了“服务大厅”是最后一

个，是因为在“服务大厅”右浮动时，它已经将区域最右侧占据，当下一个元素“需求大厅”再右浮动时，

由于最右侧已经被签一个占据，所以它只有在签一个元素的左侧，因此，顺序会是倒序的。就是说如

果用left对ABCDE排列，那么用right之后结果就会变成：EDCBA。

 

 

 二、在固定宽度下有间隔的排列

       在外围区域宽度固定的情况下，要想使ul中的li内容有一定间隔的横向排列，只要不设置在x方向上

的overflow:hidden;而整个ul为：margin-right:-12px（12随内容而定），如下：

HTML中：

1 
     
       2     
      
        3     
       
         4         
        
 5             
         
          
         
 6             
 7                 猪八戒 8             
 9             
         
          TA 出售的服务(好评率99.51%)
         
10         
11         
        
12             
         
          
         
13             
14                 猪八戒15             
16             
         
          TA 出售的服务(好评率99.51%)
         
17         
18         
        
19             
         
          
         
20             
21                 猪八戒22             
23             
         
          TA 出售的服务(好评率99.51%)
         
24         
25     
       
26     
      
27 
     

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 }

结果为：