<div class="table">    <ul class="nav">      <li class="active">房產</li>      <li>家居</li>      <li>二手房</li>    </ul>    <div class="page"></div>                  //CSS中設置display:none;  隱藏    <div class="page-hide"></div>             //CSS中設置display:block; 出現</div>
 
 css :
 
.tab-list{           //最外的框    width: 273px;  height: 153px;    border: 1px solid black;    background-color: #ddd; }.nav{            //上標題欄    height: 32px;    border-bottom: 2px solid red; }.nav li{          //每個標題    display: inline-block;    height: 30px;line-height:30px;    width: 60px;    border:1px solid blue;}.nav .active{              border-top: 2px solid yellow;    border-bottom: 2px solid #fff; } 設置active的border，此時右邊兩個標題會被一起撐下來（border是加在內容寬度上面的。）
 
 
 
123456789101112131415161718
.tab-list{           //最外的框    width: 273px;  height: 153px;    border: 1px solid black;    background-color: #ddd; }.nav{    height: 32px;    border-bottom: 2px solid red; }.nav li{    float：left;    height: 30px;line-height:30px;    width: 60px;    border:1px solid blue;}.nav .active{    border-top: 2px solid yellow;    border-bottom: 2px solid #fff; }  設置active的border，此時右邊兩個標題不會變化
　　
                   結論：   使用display：inline-block ，<li>變成內聯元素，位于一行，此時可以控制寬高、外邊距等。此時為<li>中的一個元素設置border，另外兩個<li>也需要和它在同一行，所以被撐開。   使用float：left，只是向左浮動在一行，此時top位置始終對齊，三者沒有關聯性。         
其他問題 一、inline-block帶來的間距留白問題 
 
123456
#list li{    border-right:1px solid #fff;    border-bottom:1px solid #fff;    list-style:none;    text-align:center;    display:inline-block;}
　　
效果如左圖問題：第二行開始border總是不能連續；原因：使用display:inline-block時vertical-algin候默認為baseline 
1234567
#list li{    border-right:1px solid #fff;    border-bottom:1px solid #fff;    list-style:none;    text-align:center;   <strong> display:inline-block;    vertical-align:middle;</strong>   //默認是baseline}
123456
#list li{    border-right:1px solid #fff;    border-bottom:1px solid #fff;    list-style:none;    text-align:center;   <strong> float:left; </strong>          //使用浮動}
               二、浮動、inline-block和圖像排列 左圖，把一系列元素設置了浮動，因為盒子二號寬度的關系，可以發現盒子五號被擠進去了。 右圖使用inline-block則不會。  inline-block主要是為了處理垂直對齊問題。若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是因為浮動后，圖片脫離了文檔流。而inline-block由于未脫離文檔流，所以元素不會被某個過長的列擠上來。如果你想再創建一列圖片時，不會受到上一列圖片inline:block的影響。 另一種inline-block的適用：橫向導航欄。 1、通常會設置a元素display：block然后進行浮動來制作； 2、有時候會直接通過對列表元素設置display:inline來制作。 當你需要將元素（圖片、橫向排列鏈接）排列成一行或者多行時，inline-block會更好： 1、更傾向于考慮使用inline-block代替float。 2、直接使用table也是一種方法，table是專門用來處理橫向與縱向排列的元素的。當需要創建一個很復雜的包含行列的布局，table是最佳選擇。 
    #columnContent .item_ul>li    {         float:left;        width:203px;        margin:3px 5px;        vertical-align:top;        text-align:left;   } 效果：菜單居中和自適應問題：整體樣式沒問題，但是展開li標簽內容時，其他li標簽環繞，         又因為存在自適應，當頁面縮小時，每行的li標簽個數會減少，并且居中
    #columnContent .item_ul>li    {        display:inline-block;        width:203px;        margin:3px 5px;        vertical-align:top;        text-align:left;               *display:inline;           zoom:1; }   只需替換一個浮動樣式就都解決了。
          總結：   inline-block元素帶有一些行內元素的特征（橫向排列），同時內部也擁有塊級元素的屬性。這個跟浮動很類似，只不過有些區別，這些區別決定了你該使用哪種方案。  如果你很糾結垂直對齊問題或者橫向排列元素，不妨使用inline-block。如果你需要對一個元素跟圍繞他的一些元素進行更多控制，你需要浮動。 當然，table也是你處理一些問題的最佳方案。