inline-block的间隙问题

如何去掉li之间的空隙?


原来如此

具有display:inline-block声明的对象遵循空白规则,每个字符“空间”,“标签”,“新线”,“回车”或“新的一页”,可以采取的空格和视觉上独立的空格(换行符和几个制表符被视为一个空格,只是为了清楚)。想象下输入的单词之间的空格是空格吗?这些块之间的空间就像单词之间的空格。

  • CSS标准定制的草稿网址:

https://drafts.csswg.org/css-display/

怎么办呢

达到效果,有很多办法的,如下:

①根源上去除空格

  • 方法一:
1
2
3
4
5
6
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
  • 方法二:
1
2
3
4
5
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
  • 方法三:
1
2
3
4
5
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>

②负边距

强行跨越过空格,根据浏览器、字体大小而设置的边距大小不同

1
2
3
4
ul li {
display: inline-block;
margin-right: -5px;
}

③利用HTML5标准

1
2
3
4
5
<ul>
<li>one
<li>two
<li>three
</ul>

④父级空间设置大小为零的字体

1
2
3
4
5
6
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}

⑤改变display

  • 利用flex盒子
1
2
3
ul{
display:flex;
}
  • 利用浮动变为块状
1
2
3
ul li {
float:left;
}
文章目录
  1. 1. 原来如此
  2. 2. 怎么办呢
    1. 2.1. ①根源上去除空格
    2. 2.2. ②负边距
    3. 2.3. ③利用HTML5标准
    4. 2.4. ④父级空间设置大小为零的字体
    5. 2.5. ⑤改变display
|