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

2016-11-21 1326 0 編輯:網站設計伍林 來源:本站原創

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,實現起來是相對麻煩,且效果不盡如人意的!

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾