html - 行内 block 列表项中不需要的边距

Question

<分区>

Answer 1

这是由 display: inline-block;

引起的

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

将其更改为float: left;。

我以为是内边距问题，仔细一看才发现是显示问题:)

Example here .

---

在 further research 之后我发现 inline-block 是一种依赖空白的方法，它在每个元素的右侧呈现 4px 的边距。

为避免这种情况，您可以在一行中同时运行所有 li，或者像这样将结束标记和开始标记放在一起:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here .

希望对您有所帮助:)