亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)篇--如何解決inline-block元素的空白間距

JowayYoung / 1326人閱讀

摘要：先看結(jié)構(gòu)代碼在的元素之間存在的空白如圖第一種就是改變結(jié)構(gòu)結(jié)構(gòu)一這種方法接近標(biāo)簽換行格式的寫法，也更趨近閱讀。當(dāng)然有些文章介紹使用來解決，這也是跟元素的字號(hào)有極大的關(guān)系。如果元素是一個(gè)，則查找文檔內(nèi)容。如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，則屬性將返回。

早上在博客中有人提了這樣一個(gè)問題：“l(fā)i元素inline-block橫向排列，出現(xiàn)了未知間隙”，我相信大家在寫頁面的時(shí)候都遇到過這樣的情況吧。

我一般遇到這情況都會(huì)把li浮動(dòng)起來，這樣就沒有間隙。但是解決這個(gè)未知間隙，還是有很多辦法的，在w3cplus上提供了好幾種解決辦法。在這總結(jié)一下。

先看結(jié)構(gòu)：

    
  
  • item1
    • 
  
  • item2
    • 
  
  • item3
    • 
  
  • item4
    • 
  
  • item5
    •

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”的空白：如圖：

第一種就是改變html結(jié)構(gòu) 結(jié)構(gòu)一： 
    
  
  • 
  item1
  • 
  item2
  • 
  item3
  • 
  item4
  • 
  item5
    •   



這種方法接近標(biāo)簽換行格式的寫法，也更趨近閱讀。
結(jié)構(gòu)二： 

結(jié)構(gòu)二和結(jié)構(gòu)一幾乎是一樣，結(jié)束標(biāo)簽的“>”成了另一行的起始標(biāo)簽。
結(jié)構(gòu)三： 
    
  
  • item1
  • item2
  • item3
  • item4
  • item5
    •   



結(jié)構(gòu)三的方法采用的是html的注釋的方法，這種方法我想大家不太常見，不過同樣能解決我們需要解決的問題。
結(jié)構(gòu)四： 
  • item1
  • item2
  • item3
  • item4
  • item5


結(jié)構(gòu)四，我想是大家常用來解決這樣的問題的方法吧
方法二：負(fù)的margin

很多地方討論使用負(fù)的margin來解決，比如說：

ul {
        font-size: 12px;
    }
    ul li {
        margin-right: -4px;
        *margin-right: 0;
    }

這種解決方法并不完美，如果你的父元素設(shè)置的字號(hào)不一樣，可能你的“-4px”就不能解決問題。況且在Chrome中你需要另外設(shè)置一個(gè)負(fù)的margin值才能實(shí)現(xiàn)同等的效果。

當(dāng)然有些文章介紹使用"-0.25em"來解決，這也是跟元素的字號(hào)有極大的關(guān)系。所以我個(gè)人建議不使用負(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下可問題依然存在：

方法四：丟失結(jié)束標(biāo)簽 
    
  
  • item1
  
  • item2
  
  • item3
  
  • item4
  
  • item5

但是這樣的方法是不推薦的。

方法五：jquery方法

html結(jié)構(gòu)：

    
  
  • item1
    • 
  
  • item2
    • 
  
  • item3
    • 
  
  • item4
    • 
  
  • item5
    •

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)）。如果元素是一個(gè)iframe，則查找文檔內(nèi)容。
filter方法：篩選出與指定表達(dá)式匹配的元素集合。這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(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ù)不同字體字號(hào)或許需要做一定的調(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111136.html

相關(guān)文章

  • 知識(shí)整理之CSS篇

    摘要：如對(duì)知識(shí)點(diǎn)感興趣，可移步至知識(shí)整理之篇就是針對(duì)不同的瀏覽器或不同版本瀏覽器寫特定的樣式達(dá)到讓瀏覽器兼容的過程。對(duì)于偽元素的定義偽元素在中創(chuàng)建了一些抽象元素，這些對(duì)象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素，單元素在文檔流中仍占據(jù) CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識(shí)點(diǎn)、性能優(yōu)化等方面進(jìn)行歸納。如對(duì)HTML知識(shí)點(diǎn)感興趣，可移步至...

    ermaoL 評(píng)論0 收藏0

  • css基礎(chǔ)

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見 區(qū)別： display:none;會(huì)讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任何空間；vi...

    JinB 評(píng)論0 收藏0

  • 解剖CSS布局原理

    摘要：前言本文將帶你重新認(rèn)識(shí)布局，帶你解剖布局原理，前提是你要有基礎(chǔ)本文將解除你在布局方面的疑惑。以下將對(duì)布局元素和文檔流進(jìn)行詳細(xì)講解。而且還能保持文檔流，這是其他元素做不到的。 前言 本文將帶你重新認(rèn)識(shí)CSS布局，帶你解剖布局原理，前提是你要有基礎(chǔ)！本文將解除你在布局方面的疑惑。認(rèn)識(shí)每個(gè)布局元素，了解他們的特性，你才知道為什么會(huì)是這樣的結(jié)果。本文內(nèi)容純屬個(gè)人理解，不代表官方。 此文主要為理...

    李文鵬 評(píng)論0 收藏0

  • div+css圖片列表布局（二）

    摘要：本文默認(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...

    iflove 評(píng)論0 收藏0

  • div+css圖片列表布局（二）

    摘要：本文默認(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...

    KnewOne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<