談談網頁設計之inline-block的幾個神奇的用法

inline-block，我們平時用的很多，最普通的用法就是幾個div在一行中顯示，我們用display:inline-block。今天之所以寫這篇文章，主要是寫inline-block的幾個比較奇特的用法。

實現div寬度根據內容自適應

我們知道div是塊級元素，假如我們不設置寬度，那么div的寬度默認是100%；問：要想div寬度根據內容自適應怎么辦？

請看下面代碼：

<div class="parent">

  <div class="children">歡迎來到深正互聯，這篇文章是關于inline-block的用法</div>

</div>

<style type="text/css">

.parent{

  width:800px;

  height:400px;

  border:1px solid red;

}

.children{

  border:1px solid blue;

  height:50px;

}

</style>

我們會看到，children會撐滿parent，如何讓children內容自適應呢？我們今天主要講的是inline-block，沒錯，加上inline-block就可以了，我們把上面代碼稍微改進！

.children{

  border:1px solid blue;

  height:50px;

  display:inline-block;

  *display:inline; //兼容低版本IE瀏覽器寫法

  *zoom:1;//兼容低版本IE瀏覽器寫法

}

div就會根據內容自適應了！

基于父級元素居中對齊

場景是這樣的，有一個父級元素DIV，寬度是1000px;父級div里面有很多a標簽，或者div，問，如何讓其子元素居中對齊？

有的朋友這么做：

把所有的元素外層再包裹一個div，給div一個寬度，然后用margin:0 auto，這種方式對齊，這種方式對齊有個缺點，因為你的給寬度的div不可能完全包裹住里面的元素，這樣里面的元素相對于最外層的div還是不會完全居中對齊。

用 inline-block方式：

父級div給一個text-align:center;所有子級元素給一個 display:inline-block;就可以了！

<ul class="Center">                                    

  <li data-tab-index="0" class="Li"></li>

  <li data-tab-index="0" class="Li Cur"></li>

  <li data-tab-index="0" class="Li"></li>

  <li data-tab-index="0" class="Li"></li>

  <li data-tab-index="0" class="Li"></li>

</ul>

.Center {

    height: 40px;

    width: 100%;

    text-align: center;

}

.Li {

    width: 14px;

    height: 14px;

    margin: 15px 5px 0px 5px;

    background-color: #dfcea5;

    border-radius: 7px;

    display: inline-block;

    cursor: pointer;

}

上面就是對inline-block的幾點應用，雖然很簡單，但是一旦你沒有用inline-block，實現起來是相對麻煩，且效果不盡如人意的！