摘要:要使多個(gè)塊級(jí)元素并行顯示,可使用或者進(jìn)行處理使用會(huì)出現(xiàn)元素之間的間隙我是一個(gè)我是一個(gè)我是一個(gè)我是一個(gè)如圖間隙是由換行或者回車導(dǎo)致的,所以將標(biāo)簽代碼都寫同一行即可解決。如圖注釋如需對(duì)低版本兼容還得進(jìn)一步處理
要使多個(gè)塊級(jí)元素并行顯示,可使用float或者inline-block進(jìn)行處理
使用inline-block會(huì)出現(xiàn)元素之間的間隙
<div class="demo"> <p>我是一個(gè)spanp> <p>我是一個(gè)spanp> <p>我是一個(gè)spanp> <p>我是一個(gè)spanp> div> .demo span{ background:#ffffd; display:inline-block; }
如圖:
*間隙是由換行或者回車導(dǎo)致的,所以將標(biāo)簽代碼都寫同一行即可解決。不過(guò)這個(gè)方法不靠譜,因?yàn)閟pace是由換行或回車所產(chǎn)生空白符所致,所以在其父元素設(shè)置font-size:0,如元素內(nèi)有文字標(biāo)簽需重寫font-size。
.demo{ font-size:0; } .demo span{ background:#ffffd; display:inline-block; font-size:14px; }
?如圖:
?
?
注釋:如需對(duì)低版本兼容還得進(jìn)一步處理
?
?
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/1504.html
摘要:父容器設(shè)置優(yōu)點(diǎn)彈性布局可以去除多余間隙,而且可以輕松的實(shí)現(xiàn)垂直居中,水平居中等效果。缺點(diǎn)過(guò)低版本的瀏覽器不支持該屬性。 什么是inline-block之間的多余間隙 考慮以下代碼: One Two Three nav a { display: inline-block; //或者inline; padding: 5px; background: red; }...
摘要:一兼容性不識(shí)別但可以觸發(fā)塊元素,其它主流瀏覽器均支持。兩個(gè)要先后放在兩個(gè)樣式聲明中才有效果直接設(shè)置,使用觸發(fā)。 一、兼容性: 1. IE6、IE7不識(shí)別inline-block但可以觸發(fā)塊元素,其它主流瀏覽器均支持inline-block。 注:在行內(nèi)元素上使用display:inline-block,IE6、7與其他瀏覽器效果一致 原因分析:使用inline-block屬性在IE下會(huì)...
摘要:一兼容性不識(shí)別但可以觸發(fā)塊元素,其它主流瀏覽器均支持。兩個(gè)要先后放在兩個(gè)樣式聲明中才有效果直接設(shè)置,使用觸發(fā)。 一、兼容性: 1. IE6、IE7不識(shí)別inline-block但可以觸發(fā)塊元素,其它主流瀏覽器均支持inline-block。 注:在行內(nèi)元素上使用display:inline-block,IE6、7與其他瀏覽器效果一致 原因分析:使用inline-block屬性在IE下會(huì)...
摘要:中線基線頂線底線中線基線頂線底線是文本的幾個(gè)基本線,其對(duì)應(yīng)位置如下圖基線小寫英文字母的下端沿。中線小寫英文字母的中間。將元素的基線與其父元素的下標(biāo)基線對(duì)齊。將元素的基線對(duì)準(zhǔn)給定長(zhǎng)度高于其父元素的基線。 今日勵(lì)志語(yǔ) 往日不可追,來(lái)日猶可期,祝大家2019年繼往開來(lái) 迷之間隙 我們創(chuàng)建一個(gè)導(dǎo)航列表,并將其列表 item 設(shè)置為 inline-block,主要代碼如下: 我 我 ...
閱讀 1058·2021-11-15 18:06
閱讀 2416·2021-10-08 10:04
閱讀 2714·2019-08-28 18:03
閱讀 952·2019-08-26 13:42
閱讀 1980·2019-08-26 11:31
閱讀 2489·2019-08-23 17:13
閱讀 988·2019-08-23 16:45
閱讀 2139·2019-08-23 14:11