解决CSS中<li>之间的空白间隔问题

有时候,我们需要将&lt;li&gt;横向排列,而又为了能设置其宽度和高度,为其设置display:inline-block,相邻&lt;li&gt;之间会出现8px的空白间隔,不是margin也不是padding。 &lt;html&gt;&lt;he...

有时候,我们需要将<li>横向排列,而又为了能设置其宽度和高度,为其设置display:inline-block,相邻<li>之间会出现8px的空白间隔,不是margin也不是padding。

<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
li {
width:100px;
height:100px;
display:inline-block;
list-style:none;
}
#li1 {
background:red;
}
#li2 {
background:blue;
}
#li3 {
background:yellow;
}
#li4 {
background:black;
}
</style>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
</ul>
</body>
</html>

attachments-2020-07-g5FqLfqV5f02f1998bb18.png


原因:

浏览器会把inline元素间的空白字符(空格、换行、Tab等)渲染成一个空格。而为了美观。我们通常是一个<li>放在一行,这导致<li>换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。


解决:

方法一:为<li>设置float: left。不足:有些容器是不能设置浮动,如左右切换的焦点图等。


方法二:将所有<li>写在同一行。不足:代码不美观。


方法三:将<ul>内的字符尺寸直接设为0,即font-size: 0。不足:<ul>中的其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸,且在Safari浏览器依然会出现空白间隔。


方法四:消除<ul>的字符间隔letter-spacing: -8px,而这也设置了<li>内的字符间隔,因此需要将<li>内的字符间隔设为默认letter-spacing: normal。 

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
李沁雪
李沁雪

9 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章