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