Css 内联块列表项中不需要的边距

发布于02月11日

我有以下HTML:

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

和以下CSS规则:

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

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

出于某种奇怪的原因，在Firefox和Chrome中，列表项的周围都有空白.看看firebug，列表项根本没有任何空白，但它们之间似乎有一个空白.

如果稍后我使用以下命令通过javascript添加更多列表项

$('<li><div>added via js</div></li>').appendTo($('ul'));

新元素周围不会出现"边距":

不需要的边距

你知道这里到底发生了什么事吗？

推荐答案

这是由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美元.

希望有帮助:)