css學習筆記二之inline-block，inline-block

css學習筆記二之inline-block，inline-block

1、inline-block是CSS2.1中新增的盒類型，在div中將display屬性設定為"inline-block"，則div顯示效果與設定display屬性為"inline"是一樣的效果。

inline-block具有inline屬性的列屬性，內部又具有block屬性的塊屬性，可以使用width,height,margin,padding,border等元素。

2、使用inline-block可以在某些情況下替代float浮動元素，PS：要做一個橫嚮導航條

在inline-block出現之前，一般都是使用以下代碼，來完成上述功能：

<div class="nav">    <ul>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>        <li><a href="">AngularJS</a></li>    </ul></div>li {    float: left;    list-style: none;    width: 100px;    padding: 10px 0;}

而使用inline-block，則可以通過如下程式碼完成：

li {display: inline-block;width: 100px;padding: 10px 0;text-align: center;}

　關於兩者的區別，在於float脫離文檔流，若是需要文字環繞，則應該選擇float元素，若需要讓nav置中，或垂直對齊，則需要用inline-block。

　而在使用inline-block時，若是給上述li元素加上邊框，則會發現左右有空白出現，這時有何解決方案呢？現在讓我們來看看解決方案：