首頁  >  文章  >  web前端  >  5種方法快速去除HTML中Inline-Block的空白

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

高洛峰
高洛峰原創
2017-02-18 15:40:371071瀏覽

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

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

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

<ul>   
  
<li>Item content</li>   
  
<li>Item content</li>   
  
<li>Item content</li>   
  
</ul>

當然,這樣看起來很亂,當然,這樣看起來很亂,當然讓程式碼不好維護,但很實用,很直觀,更重要的……很可靠。

方法2:在父元素上設定font-size: 0

解決這個空白問題最好的方案是在這些inline-block元素的父元素上設定font-size: 0。如果你的

    裡面有inline-block的
  • ,那你可以這樣做:
    .inline-block-list { /* ul or ol with this class */   
     font-size: 0;   
    }   
      
    .inline-block-list li {   
     font-size: 14px; /* put the font-size back */   
    }

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

    方法3:HTML註解

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

    <ul>  
     <li>Item content</li><!--  
     --><li>Item content</li><!--  
     --><li>Item content</li>  
    </ul>

    用一個字…噁心。用兩個字…非常噁心。用三個字….OK,你明白。但這確實管用!

    方法4:負邊距

    跟方法2很相似,抱歉。你可以利用inline-block的彈性,為它們設定一個負邊距,隱藏空白:

    .inline-block-list li {   
     margin-left: -4px;   
    }

    這種方法最不推薦,因為你必須考慮到各種情況,有時會出現一些無法預料的空白。最好不用這招。

    方法5:首尾接龍

    另外一個利用HTML標記的方法是將元素的閉合標記和下一個元素的開始標記靠在一起:

    <ul>  
     <li>Item content</li  
     ><li>Item content</li  
     ><li>Item content</li>  
    </ul>

    並寧願HTML

    刪除那些空白,而不考慮程式碼的可讀性。

    沒有一個方法是非常理想的,但在網頁中不留空白也是一個爛方法。這並不是警告你不要使用inline-block,inline-block仍然是非常的有用,只是在使用你要明白如何處理裡面出現的空白。

    以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。

    更多5種方法快速去掉HTML中Inline-Block的空白相關文章請關注PHP中文網!


    🎜
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn