Question

我有以下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'));

新元素周围没有出现“边距”：

Unwanted margins

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

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

希望有所帮助：）

Answer 2

我找到了克服同样问题的一个很好的技巧。我的顶级菜单中的列表项在我删除“float：left;”之后每个都有空格边距。支持“display：inline-block;”。

尝试将无序列表的字体大小设置为“0”，即：

ul { font-size:0; }
li { font-size:18px; }

为我工作。

Answer 3

看到这篇文章和给出的答案，我想我会解释这里发生了什么。这不是错误，但实际上是内联块的预期行为。

说明为什么这是正确行为的最好方法是使用段落中的表情符号：

<p>
  Hi, really glad to hear from you yesterday 
  <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>

默认情况下，图像显示为内联块（IE：符合内联流的块元素 - 非常类似于单个文本字符）。在这种情况下，你会希望两个表情贴在彼此旁边，但你仍然需要在“昨天”和第一个笑脸之间留一个空格。

希望这能解释它，并解释为什么inline-block需要很长时间才能完全支持;实际上并没有很多用例按预期使用它。

要回答你的问题，最好的办法是：

ul {
  height: some set height
       /* OR */
  overflow-y: auto;
}

ul li {
  float: left;
}

Answer 4

在我看来，在这种情况下，最好的办法是删除li父母的字母间距，并将其重新放在li上！

所以你的CSS规则：

ul{
    padding: 0;
    border: solid 1px #000;
    letter-spacing  :-4px; /*Remove the letter spacing*/
}
li{
    display:inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
    letter-spacing  :0px; /*Put back the letter spacing*/ 

}

Answer 5

删除所有</li>代码。我不知道为什么，但这可以解决您的保证金问题。

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

Answer 6

我刚刚发现了这种情况发生的原因。看来，当使用内联块时，元素内的任何空格都会被渲染。

所以不要写

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

我应该写：

        <li>
            <div>first</div>
        </li><li><div>first</div>
        </li><li>....

li和它的结束标记之间没有空格。当通过js追加时，这个空格没有出现的原因是因为appendTo方法具有所有标记，它们之间没有任何空格。是的，这很糟糕，但如果我不想使用float，那就是唯一的解决方案：左。

找到解决方案here

Answer 7

将display: inline-block更改为display: table-cell也会删除空格。

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

Answer 8

我在这里找到了这个问题的答案：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

他说：

“......内联块存在一个巨大的缺点。也就是说，由于元素变为内联呈现，HTML代码中的空白区域将影响渲染。这意味着，如果我们在LI之间有空格在我们的代码中，它将在每个元素的右侧渲染一个4像素的边距。“

因此，解决方案是删除inline-block元素之间的换行符。

  <ul>
    <li><a href="#">Make</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Not</a></li>
    <li><a href="#">War</a></li>
  </ul>

...变为

<ul>
    <li>
      <a href="#">Make</a>
    </li><li>
      <a href="#">Love</a>
    </li><li>
      <a href="#">Not</a>
    </li><li>
      <a href="#">War</a>
    </li>
</ul>

麻烦的边缘消失了。

Answer 9

试试这个解决方案：

    <ul><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
    --></ul>

Answer 10

尝试更改您的＆＃39;显示：inline-block＆＃39;到＆＃39;浮动：离开＆＃39;你看到的分离然后消失了。这是一个让你玩的jsFiddle：

http://jsfiddle.net/rcravens/XD9SD/

鲍勃

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

10 个答案: