資訊專欄INFORMATION COLUMN
摘要：先看結(jié)構(gòu)代碼在的元素之間存在的空白如圖第一種就是改變結(jié)構(gòu)結(jié)構(gòu)一這種方法接近標(biāo)簽換行格式的寫法，也更趨近閱讀。當(dāng)然有些文章介紹使用來解決，這也是跟元素的字號有極大的關(guān)系。如果元素是一個，則查找文檔內(nèi)容。如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，則屬性將返回。
早上在博客中有人提了這樣一個問題：“l(fā)i元素inline-block橫向排列，出現(xiàn)了未知間隙”，我相信大家在寫頁面的時候都遇到過這樣的情況吧。
我一般遇到這情況都會把li浮動起來，這樣就沒有間隙。但是解決這個未知間隙，還是有很多辦法的，在w3cplus上提供了好幾種解決辦法。在這總結(jié)一下。
先看結(jié)構(gòu)：
css代碼：
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
在inline-block的元素之間存在“4px”的空白：如圖：
結(jié)構(gòu)二：這種方法接近標(biāo)簽換行格式的寫法，也更趨近閱讀。
結(jié)構(gòu)三：結(jié)構(gòu)二和結(jié)構(gòu)一幾乎是一樣，結(jié)束標(biāo)簽的“>”成了另一行的起始標(biāo)簽。
結(jié)構(gòu)四：結(jié)構(gòu)三的方法采用的是html的注釋的方法，這種方法我想大家不太常見，不過同樣能解決我們需要解決的問題。
方法二：負(fù)的margin結(jié)構(gòu)四，我想是大家常用來解決這樣的問題的方法吧
很多地方討論使用負(fù)的margin來解決，比如說：
ul {
font-size: 12px;
}
ul li {
margin-right: -4px;
*margin-right: 0;
}
這種解決方法并不完美，如果你的父元素設(shè)置的字號不一樣，可能你的“-4px”就不能解決問題。況且在Chrome中你需要另外設(shè)置一個負(fù)的margin值才能實(shí)現(xiàn)同等的效果。
當(dāng)然有些文章介紹使用"-0.25em"來解決，這也是跟元素的字號有極大的關(guān)系。所以我個人建議不使用負(fù)的margin來解決這樣的問題。
方法三：設(shè)置父元素字體為0第三種方法設(shè)置父元素的字體為“0”，然后在“inline-block”元素上重置字體需要的大小。
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
font-size: 12px;
}
這樣處理在Firexfox,chrome等瀏覽器下是達(dá)到了效果，可是在Safari下可問題依然存在：
但是這樣的方法是不推薦的。
方法五：jquery方法html結(jié)構(gòu)：
css代碼：
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}
jquery代碼：
$(".removeTextNodes").contents().filter(function() {
return this.nodeType === 3;
}).remove();
其中contents()方法：查找匹配元素內(nèi)部所有的子節(jié)點(diǎn)（包括文本節(jié)點(diǎn)）。如果元素是一個iframe，則查找文檔內(nèi)容。
filter方法：篩選出與指定表達(dá)式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達(dá)式。
nodeType 屬性返回以數(shù)字值返回指定節(jié)點(diǎn)的節(jié)點(diǎn)類型。
如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，則 nodeType 屬性將返回 1。
如果節(jié)點(diǎn)是屬性節(jié)點(diǎn)，則 nodeType 屬性將返回 2。
元素或?qū)傩灾械奈谋緝?nèi)容,則nodeType 屬性將返回 3。
使用純CSS還是找到了兼容的方法，就是在父元素中設(shè)置font-size:0,用來兼容chrome，而使用letter-space:-N px來兼容safari:
.finally-solve {
letter-spacing: -4px;/*根據(jù)不同字體字號或許需要做一定的調(diào)整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}
問題地址：http://segmentfault.com/q/101...
原文地址：http://www.w3cplus.com/css/fi...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111136.html
摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進(jìn)行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間；vi...
摘要：本文默認(rèn)你已經(jīng)看過了我的上一篇文章圖片列表布局一，接下來我們來實(shí)現(xiàn)復(fù)雜一點(diǎn)的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標(biāo)題加上圖片標(biāo)題效果如圖詳細(xì)的代碼可以參閱上一篇文章圖片列表布局一 本文默認(rèn)你已經(jīng)看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實(shí)現(xiàn)復(fù)雜一點(diǎn)的圖片列表布局。以下面的樣式為例 showImg(https://seg...
摘要：本文默認(rèn)你已經(jīng)看過了我的上一篇文章圖片列表布局一，接下來我們來實(shí)現(xiàn)復(fù)雜一點(diǎn)的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標(biāo)題加上圖片標(biāo)題效果如圖詳細(xì)的代碼可以參閱上一篇文章圖片列表布局一 本文默認(rèn)你已經(jīng)看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實(shí)現(xiàn)復(fù)雜一點(diǎn)的圖片列表布局。以下面的樣式為例 showImg(https://seg...
閱讀 2457·2021-10-09 09:59
閱讀 2228·2021-09-23 11:30
閱讀 2621·2019-08-30 15:56
閱讀 1173·2019-08-30 14:00
閱讀 2970·2019-08-29 12:37
閱讀 1294·2019-08-28 18:16
閱讀 1683·2019-08-27 10:56
閱讀 1050·2019-08-26 17:23
