无序列表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随内容而定），如下：

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           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 }

结果为：

 

 

posted @ 2013-11-04 11:12  zhunaoke  阅读(85182)  评论(0)  编辑  收藏  举报