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

JowayYoung 發布于2019-08-28 18:16 / 1252人閱讀

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

早上在博客中有人提了這樣一個問題：“li元素inline-block橫向排列，出現了未知間隙”，我相信大家在寫頁面的時候都遇到過這樣的情況吧。

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

先看結構：


  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結構 結構一：


  
  item1

  item2

  item3

  item4

  item5

這種方法接近標簽換行格式的寫法，也更趨近閱讀。

結構二：

結構二和結構一幾乎是一樣，結束標簽的“>”成了另一行的起始標簽。

結構三：


  item1
item2
item3
item4
item5

結構三的方法采用的是html的注釋的方法，這種方法我想大家不太常見，不過同樣能解決我們需要解決的問題。

結構四：

item1
item2
item3
item4
item5

結構四，我想是大家常用來解決這樣的問題的方法吧

方法二：負的margin

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

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

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

當然有些文章介紹使用"-0.25em"來解決，這也是跟元素的字號有極大的關系。所以我個人建議不使用負的margin來解決這樣的問題。

方法三：設置父元素字體為0

第三種方法設置父元素的字體為“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等瀏覽器下是達到了效果，可是在Safari下可問題依然存在：

方法四：丟失結束標簽


  item1
  
item2
  
item3
  
item4
  
item5

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

方法五：jquery方法

html結構：


  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()方法：查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容。
filter方法：篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式。

nodeType 屬性返回以數字值返回指定節點的節點類型。
如果節點是元素節點，則 nodeType 屬性將返回 1。
如果節點是屬性節點，則 nodeType 屬性將返回 2。
元素或屬性中的文本內容,則nodeType 屬性將返回 3。

全兼容的樣式解決方法

使用純CSS還是找到了兼容的方法，就是在父元素中設置font-size:0,用來兼容chrome，而使用letter-space:-N px來兼容safari:

.finally-solve {
  letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
  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...

GPU云服務器云服務器 css間距 html塊內元素間距鳥哥的服務器篇如何基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111136.html

知識整理之CSS篇

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

ermaoL 2019-08-30 15:55 評論0 收藏0
css基礎

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

JinB 2019-08-30 14:21 評論0 收藏0
解剖CSS布局原理

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

李文鵬 2019-08-29 12:28 評論0 收藏0
div+css圖片列表布局（二）

摘要：本文默認你已經看過了我的上一篇文章圖片列表布局一，接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標題加上圖片標題效果如圖詳細的代碼可以參閱上一篇文章圖片列表布局一本文默認你已經看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例 showImg(https://seg...

iflove 2019-08-30 13:19 評論0 收藏0
div+css圖片列表布局（二）

摘要：本文默認你已經看過了我的上一篇文章圖片列表布局一，接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例為了方便，我只列出的布局示例。好了，完美接下來把標題加上圖片標題效果如圖詳細的代碼可以參閱上一篇文章圖片列表布局一本文默認你已經看過了我的上一篇文章 div+css圖片列表布局（一），接下來我們來實現復雜一點的圖片列表布局。以下面的樣式為例 showImg(https://seg...

KnewOne 2019-08-01 16:10 評論0 收藏0