内联块列表项中不需要的边距[重复]答案

【问题标题】：Unwanted margin in inline-block list items [duplicate]内联块列表项中不需要的边距[重复]
【发布时间】：2011-06-25 12:58:46
【问题描述】：

我有以下 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 中都出现在它们周围的边距。看萤火虫，列表项根本没有任何边距，但它们之间似乎有一个空白空间。

如果我稍后使用

通过 javascript 添加更多列表项

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

“边距”不会出现在新元素周围：

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

【问题讨论】：

为什么不使用margin-right: -4px; 有什么不应该工作的原因吗？
负边距取决于字体大小和使用的字体。
似乎很多类似的问题都因为这个问题的重复而被关闭，所以一个有用的 Chris Coyier 链接对未来的访问者：css-tricks.com/fighting-the-space-between-inline-block-elements

标签： html css

【解决方案1】：

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

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

【讨论】：

?你的意思是完全避免 ul 或者只是去掉结束标签？为什么你应该打破标记？
@Damien Pirsy：</li> 标签是可选的，省略它是安全的。这里有更多信息：stackoverflow.com/questions/3008593/…
这“修复”了问题，因为它删除了第一个 <li> 元素的结尾和第二个 <li> 元素的开头之间不需要的空格。 not 可以在源代码中使用任何缩进来实现相同的结果，我认为这是更好的样式。
无效的 HTML 低于 HTML 5...

【解决方案2】：

这是由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 的边距。

为避免这种情况，您可以将所有lis 一起运行在一行中，或者像这样阻止结束标签和开始标签：

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

Example here.

希望有帮助:)

【讨论】：

那么这是与内联块有关的错误，还是预期的行为？在我看来，这根本没有意义......
我认为你是对的。老实说，我不知道为什么它会增加新的利润，而不是新的利润。这没有道理。这是一个修复，但我仍在尝试找出“错误”背后的原因。
发现了错误并为您修复了:)
这是预期的行为。 inline-block 旨在模拟 img 标记的行为。将呈现 inline-block 元素周围的空白。
文章提到它是一个边距，但发生的是内联元素默认呈现元素的单词空间和行高。如果您不想使用 float: left，则在父容器上设置 word-spacing: 0 和 line-height: 0 实际上可以解决此问题。

【解决方案3】：

尝试将“显示：内联块”更改为“浮动：左”。你所看到的分离随即消失。这是一个 jsFiddle 供您使用：

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

鲍勃

【讨论】：

这里是添加了 javascript 的更新。 jsfiddle.net/rcravens/XD9SD/1

【解决方案4】：

我刚刚找到了发生这种情况的原因。看来，当使用 inline-block 时，元素内的任何空白都会被渲染。

所以不要写

    <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:left，这是唯一的解决方案。

找到解决方案here

【讨论】：

确实，当您有两个想要彼此相邻的内联元素（例如 img）时，您不能在它们之间留下任何空格。想要成为内联块的元素也是如此。

【解决方案5】：

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

说明为什么这是正确行为的最佳方式是在段落中使用笑脸：

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

默认情况下，图像显示为 inline-block（即：遵循内联流的块元素 - 很像文本的单个字符）。在这种情况下，您可能希望两个笑脸彼此相邻，但您仍希望在“昨天”和第一个笑脸之间留一个空格。

希望这能解释它，也解释为什么 inline-block 花了这么长时间才得到完全支持；实际上没有多少用例可以按预期使用它。

要回答您的问题，您最好这样做：

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

ul li {
  float: left;
}

【讨论】：

【解决方案6】：

在我看来，在这种情况下，最好的办法是删除 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*/ 

}

【讨论】：

荒谬的是，它的效果如何。了解它的跨浏览器兼容性吗？

【解决方案7】：

我发现了一个很好的技巧来克服同样的问题。在我删除“float:left;”之后，我的顶部菜单中的列表项之间有空白边距。支持“display:inline-block;”。

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

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

为我工作。

【讨论】：

为了支持 Opera，在 ul 中添加 line-height: 0px。要支持 Safari，您必须将 font-size 设置为 1px，而不是 0。（在 Opera 12.01、Safari 5.1.7 中测试）
如果你依赖ems，请不要使用此方法。
不敢相信这有效，但确实有效。不错。
这应该是公认的答案。
这太天才了，它有效！！！！！！

【解决方案8】：

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

他说：

"...[inline-block] 有一个巨大的缺点。也就是说，由于元素变成内联渲染，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>

讨厌的边距消失了。

【讨论】：

最佳答案，需要！ ;)
它对文档列表 ul li 无效。在无序列表中不能将任何元素作为子元素。所以在“ul”中只能是“li”，然后是“li”中的一些元素

【解决方案9】：

试试这个解决方案：

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

【讨论】：

试着用代码解释一下
在保留可读性的同时删除空白是一种厚颜无耻的技巧。空白是导致边距问题的原因，添加这样的 cmets 可以有效地删除空白。

【解决方案10】：

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

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

【讨论】：