li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？（十三）

2019-9-18    seo達(dá)人

li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

引起這種空白間隔的原因：

瀏覽器的默認(rèn)行為是把inline元素間的空白字符（空格換行tab）渲染成一個(gè)空格，也就是我們上面的代碼



換行后會(huì)產(chǎn)生換行字符，而它會(huì)變成一個(gè)空格，當(dāng)然空格就占用一個(gè)字符的寬度。

解決方案：

方法一： 既然是因?yàn)?lt; li>換行導(dǎo)致的，那就可以將< li>代碼全部寫在一排，如下





<div class="wrap">

<h3>li標(biāo)簽空白測(cè)試</h3>

<ul>

<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>

</ul>

</div>

1

2

3

4

5

6

7

再刷新頁面看就沒有空白了，就是這么神奇~



方法二： 我們?yōu)榱舜a美觀以及方便修改，很多時(shí)候我們不可能將< li>全部寫在一排，那怎么辦？既然是空格占一個(gè)字符的寬度，那我們索性就將



內(nèi)的字符尺寸直接設(shè)為0，將下面樣式放入樣式表，問題解決。

.wrap ul{font-size:0px;}

1

但隨著而來的就是



中的其他文字就不見了，因?yàn)槠涑叽绫辉O(shè)為0px了，我們只好將他們重新設(shè)定字符尺寸。

方法三： 本來以為方法二能夠完全解決問題，但經(jīng)測(cè)試，將li父級(jí)標(biāo)簽字符設(shè)置為0在Safari瀏覽器依然出現(xiàn)間隔空白；既然設(shè)置字符大小為0不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測(cè)試完美解決。同樣隨來而來的問題是li內(nèi)的字符間隔也被設(shè)置了，我們需要將li內(nèi)的字符間隔設(shè)為默認(rèn)。



.wrap ul{letter-spacing: -5px;}

1

之后記得設(shè)置li內(nèi)字符間隔





.wrap ul li{letter-spacing: normal;}

1

2

詳細(xì)看這篇文章 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔