内联块列表项中的不需要的margin [英] Unwanted margin in inline-block list items

问题描述

我有以下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，列表项没有任何边距，但似乎之间有一个空格的空间。

For some strange reason, the list items appear with a margin around them in both Firefox and Chrome. Looking at firebug, the list items do not have any margin at all, but there seems to be a void space between them.

如果我以后添加更多的列表项通过javascript using

If I later on add more list items via javascript using

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

margin不会出现在新元素周围：

the "margin" doesn't appear around the new elements:

推荐答案

这是由 display：inline-block ;

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

更改为 float：left; 。

我认为这是填充，但仔细看看，结果是显示：）

I thought it was the padding but took a closer look and turns out it was the display :)

这里的示例。

进一步的研究我发现 inline-block 是一个空白依赖的方法，并在每个元素的右边渲染一个4px的边距。

After further research I have discovered that inline-block is a whitespace dependent method and renders a 4px margin to the right of each element.

为了避免这种情况，您可以将所有 li 在一行中运行，或者阻止结束标记并开始标签在一起，如下所示：

To avoid this you could run all your lis together in one line, or block the end tags and begin tags together like this:

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

示例。

希望有助于：）

这篇关于内联块列表项中的不需要的margin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！