一、橫向兩列方式排列：
在網頁中，很多地方都會用到無序列表橫向排列的形式，通常的寫法都是使得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 }
結果為：