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

猜你喜歡



-
Chrome 將不再標記 HTTPS 頁面為安全站點
谷歌宣布從 9 月開始,Chrome 將停止在地址欄中標記 HTTPS 頁面為“安全”站點
-
7個方面讓移動端交互體驗更加優秀
移動端的應用和網頁應該是具備良好易用性和優秀交互的,無論是在什么時候,什么地方。設計師的任務是創建一個直觀的界面,引導用戶快速而順暢地執行操作,達成目標
-
個人網站的常見五大弊病
這樣做,那樣也做,結果弄得網站上亂七八糟,不知所云,整個一個大雜燴,這是國 內個人網站,尤其是新手的通病。
-
網站設計需要精雕細琢的幾個細節
網站設計不是一蹴而就的事情,設計中有諸多細節需要精雕細琢,無論經驗多么豐富的設計師設計出來的網站都不能保證讓人百之百之滿意,往往在網站設計完成交給客戶驗收后,各種各樣的要求接踵而來,幾經修改之后,面目全非
-
5種用于前端開發的JavaScript替代方案
LiveScript在1995年末發布了測試版的瀏覽器,并在最終發布前改名為JavaScript,以利用Netscape與Sun Microsystems的合作關系,后者是流行的Java語言背后的公司(盡管JavaScript本質上與Java沒有任何關系)