如何移除inline-block元素之間的空白

阿新 • • 發佈：2018-11-15

我們想要的是<li>元素可以緊貼在一起，但是很顯然，結果“出乎意料”。那麼有什麼方法可以讓結果符合我們的預期呢？所能想到的解決方法至少有以下四種，而每種方法也都有其優劣所在，至於要如何選擇，就需要取決於實際情況。

之所以有空白，是因為元素之間存在空格（連續多個空格、換行符、製表符在HTML中都認為是一個空格），那麼最簡單的方式，就是刪除空格。簡單，但是格式有點...不太好看。

<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

或者

<ul>
    <li>Item 1</li
    ><li>Item 2</li
    ><li>Item 3</li>
</ul>

或者

<ul>
  <li>item 1</li><!--
  --><li>item 2</li><!--
  --><li>item 3</li>
</ul>

或者

<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
</ul>

一個空格，如果它的font-size是0，那麼它的width也就是0，所以空白也就不存在了。但是缺點是子節點會繼承父節點屬性，所以<li>的font-size也被置為0了，為了讓<li>顯示出來，需要在<li>上單獨設定font-size。

ul {
  font-size: 0;
}
li {
  font-size: 30px;
}

當一個元素的float不是none時，這個元素相當於一個block元素，所以這種inline-block之間的空白問題，也就不存在了，但是注意，需要在父元素上清楚浮動，否則會影響其他元素的佈局。

ul {
  overflow: hidden;
}
li {
  float: left;  
}

相對來說比較推薦的做法，但是需要注意當前專案需要支援的瀏覽器，是否支援flexbox佈局。