欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

5種方法快速去掉HTML中Inline-Block的空白

  發(fā)布時間：2016-06-21 11:23:53   作者：佚名   我要評論
這篇文章主要為大家詳細(xì)介紹了快速去掉HTML中Inline-Block空白的5種方法，感興趣的小伙伴們可以參考一下

當(dāng)需要在”inline”元素上控制margin和padding時，inline-block屬性值變得非常有用，有了它，你不在需要讓這些元素去“block”和“float”。但有一個問題，當(dāng)使用inline-block時，HTML元素之間的空白會顯示在頁面上。很討厭。有幾種方法可以除去這些空白；其中一個非常巧妙。

方法1：各元素間不留任何空白

一個100%能解決這個問題的方法是在你的HTML代碼里元素間不留任何空白：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <ul>   
  2.   
  3. <li>Item content</li>   
  4.   
  5. <li>Item content</li>   
  6.   
  7. <li>Item content</li>   
  8.   
  9. </ul>   

當(dāng)然，這樣看起來很亂，讓代碼不好維護，但很實用，很直觀，更重要的……很可靠。

方法2：在父元素上設(shè)置font-size: 0

解決這個空白問題最好的方案是在這些inline-block元素的父元素上設(shè)置font-size: 0。如果你的<UL>里有inline-block的<LI>，那你可以這樣做：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. .inline-block-list { /* ul or ol with this class */   
  2.  font-size: 0;   
  3. }   
  4.   
  5. .inline-block-list li {   
  6.  font-size: 14px; /* put the font-size back */   
  7. }   
  8.   

為了不讓父元素的字體大小影響子元素，你需要重新在子元素上設(shè)置font-size值，這通常很簡單。唯一可能遇到麻煩的情況是你用相對大小設(shè)置字體。但大多數(shù)時候，這樣的方法能解決你的問題。

方法3：HTML注釋

這種方法有點暴力，但同樣能奏效。將HTML元素間用注釋填充，這跟它們之間沒有空白效果一樣：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul>  
  2.  <li>Item content</li><!--  
  3.  --><li>Item content</li><!--  
  4.  --><li>Item content</li>  
  5. </ul>  
  6.   

用一個詞…惡心。用兩個詞…非常惡心。用三個詞….OK，你明白。但這確實管用！

方法4：負(fù)邊距

跟方法2很相似，抱歉。你可以利用inline-block的靈活性，給它們設(shè)置一個負(fù)邊距，隱藏空白：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. .inline-block-list li {   
  2.  margin-left: -4px;   
  3. }   
  4.   

這種方法最不推薦，因為你必須考慮到各種情況，有時候會出現(xiàn)一些無法預(yù)料的空白。最好不用這招。

方法5：首尾接龍

另外一個利用HTML標(biāo)記的方法是將元素的閉合標(biāo)記和下一個元素的開始標(biāo)記靠在一起：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul>  
  2.  <li>Item content</li  
  3.  ><li>Item content</li  
  4.  ><li>Item content</li>  
  5. </ul>  
  6.   

并不像HTML注釋那樣丑陋，但我寧愿手工刪除那些空白，而不考慮代碼的可讀性。

沒有一個方法是非常理想的，但在網(wǎng)頁中不留空白也是一個爛方法。這并不是在警告你不要使用inline-block，inline-block仍然是非常的有用，只是在使用你要明白如何處理里面出現(xiàn)的空白。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺談inline-block及解決空白間距

    inline-block 屬性的使用隨處可見，ie 從 5.5 開始就已經(jīng)支持 display:inline-block 了，只是支持的并不是那么完美，接下來為大家詳細(xì)介紹下空白間隙是如何產(chǎn)生的，以及解
    2013-03-28

  • inline-block元素的4px空白間距解決方案

    有關(guān)于使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進行布局，或者使用inline-block來實現(xiàn)元素的居中效果;那么今天我們就一起來
    2012-12-24

  • 兼容瀏覽器的css inline-block寫法

    這篇文章主要介紹了兼容瀏覽器的inline-block,需要的朋友可以參考下
    2016-02-17

  • 深入解析CSS的display:inline-block屬性的使用

    這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時產(chǎn)生的空隙問題的解決作了重點講解,需要的朋友可以參考下
    2015-11-09

  • inline-block帶來的元素間距問題解決

    這篇文章主要介紹了inline-block帶來的元素間距問題解決,同時附上block和inline以及inlinke-block的作用對比,需要的朋友可以參考下
    2015-08-04

  • 深入了解float與inline-block

    這篇文章主要介紹了深入了解float與inline-block,分別從兼容性，對父元素的影響等方面進行了分析，推薦給小伙伴參考下
    2014-12-04

  • 使用display:inline-block居中沒有寬度的元素

    為要居中元素的父元素應(yīng)用text-align:center，為要居中的元素設(shè)定display:inline-block.這樣設(shè)定就可以得到我們想要的結(jié)果
    2014-09-29

  • 多個有inline-block的div的間距與編程的寫法有差異

    多個有border、inline-block的div的間距會根據(jù)編程的寫法有差異，下面看示例，大家感受下
    2014-03-04

  • 讓IE6/IE7支持display:inline-block屬性的兩種方法

    在IE6和IE7中這個版本的IE流量器中，對display:inline-block屬性支持不佳，下面為大家準(zhǔn)備兩種方法可以解決此問題，讓IE6/IE7 支持 display:inline-block 的方法，感興趣的
    2013-10-22

  • 如何解決IE6/IE7不識別display:inline-block屬性

    ie6，ie7的haslayout屬性是個讓人頭疼的問題，想到一個屬性display:inline-block;對！inline- block就是干這個事的，讓一個元素既不換行又具有block元素的特性
    2013-09-21

最新評論