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