导航菜单锚点间可见间隙问题：如何让红色背景铺满锚点宽度

你遇到的间隙是因为inline-block元素之间的空白字符导致的——HTML里<li>标签之间的换行和空格会被浏览器解析成空白，所以红色背景的<li>之间会露出<ul>的浅红色背景。下面是几种可行的解决办法：

方法1：使用Flex布局（推荐） #

直接把<ul>改成flex容器，自动消除子元素间的空白，还能轻松实现均匀分布：

修改CSS：

nav ul {
    list-style: none;
    padding: 0px;
    margin-top: 0px; 
    background-color: rgb(237, 215, 213);
    border-bottom: 2px solid black; 
    border-left: 2px solid black;   
    border-right: 2px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex; /* 添加flex布局 */
}  

nav li {
    /* 可移除display: inline-block; */
    margin: 0px;
    padding: 10px;
    background-color: red;
    font-size: 20px;
    line-height: 20px;
    border-right: 1px solid black;
    flex: 1; /* 可选：让每个li宽度均等 */
    text-align: center; /* 确保文字居中 */
}

方法2：移除HTML里的空白字符 #

把所有<li>标签连在一起写，去掉它们之间的换行和空格：

<nav>
    <ul>
        <li><a href="">HOME</a></li><li><a href="">DESCRIPTION</a></li><li><a href="">HISTORY</a></li><li><a href="">LIVE🔴</a></li><li><a href="">GALLERY</a></li><li><a href="">CONTACT</a></li>
    </ul>
</nav>

方法3：通过字体大小消除空白 #

给<ul>设置font-size: 0，再给<li>恢复原字体大小：

nav ul {
    /* 其他样式不变 */
    font-size: 0; /* 消除空白字符的宽度 */
}  

nav li {
    display: inline-block;
    margin: 0px;
    padding: 10px;
    background-color: red;
    font-size: 20px; /* 恢复字体大小 */
    line-height: 20px;
    border-right: 1px solid black;
}

其中Flex布局是最现代、兼容性最好的方案，还能方便后续调整导航布局。

内容的提问来源于stack exchange，提问作者Michał Leśko