li標籤間有空白是怎麼回事? 消除li橫排後空隙

2021-08-20 21:23:35 字數 1579 閱讀 3922

在製作頁面的時候,有時我們需要將li的內容進行橫向排版,在設定li標籤display:inline-block;屬性後,li之間出現大約8px的空白間隙,這是怎麼回事呢?

最近在為公司製作頁面的時候遇到了乙個bug,就是將標籤設定display:inline-block;屬性後,之間出現大約8px的空白間隙,導致頁面變得不如理想中那麼完美,解決問題後將方法分享出來,希望能幫到有需要的小夥伴。

有時頁面需要,我們需要將這個塊狀元素進行橫排,我們需要將其設定為display:inline-block;此時會頁面效果是兩個之間會有乙個大約8px的空白間隙,這讓很多小夥伴摸不著頭腦,不科學啊。

這時候肯定有小夥伴會說,我直接設定float:left;浮動不就可以了麼?其實不然,有些容器是不能設定浮動,如左右切換的焦點圖等,總之我們的前提是需要將標籤設定為display:inline-block;

目標效果

如圖,我想做的是將

瀏覽器預覽後,咦,為啥跟預想的不一樣呢?為啥之間會有空白框框呢?對的,這就是今天我們要講的bug,**沒有問題,但是頁面卻跟預想的不一樣。怎麼辦?往下看!

實際效果

筆者在網上看了一些資料,並沒有乙個確切的答案,但較為可信的原因是:瀏覽器的預設行為是把inline元素間的空白字元(空格換行tab)渲染成乙個空格,

也就是我們上面的**換行後會產生換行字元,而它會變成乙個空格,當然空格就占用乙個字元的寬度,所以***...

知道了原因,就可以尋找解決辦法了,

方法一:

既然是因為換行導致的,那就可以將**全部寫在一排,如下

再重新整理看就沒有空白了,就是這麼神奇!

方法二:

我們為了**美觀以及方便修改,很多時候我們不可能將全部寫在一排,那怎麼辦?既然是空格佔乙個字元的寬度,那我們索性就將內的字元尺寸直接設為0,將下面樣式放入樣式表,問題解決。

.wrap ul
但隨著而來的就是中的其他文字就不見了,因為其尺寸被設為0px了,我們只好將他們重新設定字元尺寸。

方法三:

2016-8-30更新

本來以為方法二能夠完全解決問題,但經測試,將li父級標籤字元設定為0在safari瀏覽器依然出現間隔空白;既然設定字元大小為0不行,那咱就將間隔消除了,將下面**替換方法二的**,目前測試完美解決。同樣隨來而來的問題是li內的字元間隔也被設定了,我們需要將li內的字元間隔設為預設。

.wrap ul
之後記得設定li內字元間隔

.wrap ul li
2016-8-30 之前寫這篇的時候是遇到li橫排的問題,後來發現這個空白間隔不僅僅是將設定為display:inline-block;後會出現,其他元素被設定為內聯塊狀元素後都會出現這樣的問題,所以此方法並不僅僅適用於標籤間的空白,其他的也同樣適用。在此不得不感嘆,學海無涯,不斷學習才是真啊!同時也對各瀏覽器之間相容性表示蛋疼,為啥你們都不能統一呢?

Share Memory協議是怎麼回事

細心的朋友會發現,sql server 2005所支援的網路庫協議中多了乙個share memory協議,那麼它是用在什麼場合的呢?下面是官方文件的一些介紹 從執行在同一臺計算機上的客戶端到 microsoft sql server 的連線使用共享記憶體協議。共享記憶體沒有可配置的屬性。始終會先嘗試...

炒股到底是怎麼回事?

到底是怎麼回事?很久就聽說 有人賺死,有人虧死。只是聽別人說,自己沒多大興趣,因為聽說風險太大,並且虧的可能性很大,呵呵,誰願意去做八成可能虧的買賣呢?但昨天在sohu上看到一條新聞,引起我對它的興趣,所以今天了解了一下。其實我覺得道理好像很簡單,就是你拿一部分錢跟你兄弟說 兄弟,咱們合夥搞一莊生意...

Python裝飾器是怎麼回事?

python裝飾器在python開發過程中,經常被使用。今天看了廖老師的文章之後,對裝飾器有了更深的理解。整理如下。比如有乙個現成的函式,它是有別人寫的,我們只能呼叫它不能修改它。但是我又想在我呼叫它的時候能夠在函式呼叫前和呼叫後做一些事情,對該函式進行功能擴充套件。這種在 執行期間動態增加函式功能...