li 标签渲染时的空隙问题

最新推荐文章于 2025-04-07 13:20:53 发布

mango660

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量237

点赞数

分类专栏： Web前端文章标签： html css html5 css3

本文链接：https://blog.youkuaiyun.com/mango660/article/details/105839957

版权

Web前端专栏收录该内容

27 篇文章

订阅专栏

在制作页面的时候，有时我们需要将li的内容进行横向排版，在设置li标签display:inline-block;属性后，li之间出现大约8px的空白间隙，这是怎么回事呢？

如该图所示
在这里插入图片描述
上图代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="li标签_.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="tag">
        <ul>
            <li class="tag1"></li>
            <li class="tag2"></li>
            <li class="tag3"></li>
        </ul>
    </div>
</body>
</html>

.tag {
    width:600px;
}
.tag li {
    width:30%;
    height: 150px;
    display:inline-block;  /* 行内块元素 */
}
.tag1 {
    background-color: gold;
}
.tag2 {
    background-color: green;
}
.tag3 {
    background-color: red;
}

原因分析：
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码< li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

解决办法：

因为< li>换行导致的，可以将< li>代码全部写在一排。

<body>
    <div class="tag">
        <ul>
            <li class="tag1"></li><li class="tag2"></li><li class="tag3"></li>
        </ul>
    </div>
</body>

将< ul>内的字符尺寸直接设为0

.tag ul{
    font-size: 0px;

将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；那就将间隔消除，将下面代码替换上一个方法的代码。伴随问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。

.tag ul{
	letter-spacing: -4px;
}

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

需要的结果展示：
在这里插入图片描述

第一次周报被问及的question，当时由于在问之前刚好查看过 so…