Flexbox 在 Chrome 中的 <li> 内放置空行 [重复]答案

【问题标题】：Flexbox puts empty line inside <li> in Chrome [duplicate]Flexbox 在 Chrome 中的 <li> 内放置空行 [重复]
【发布时间】：2017-09-08 17:06:12
【问题描述】：

我有以下 HTML：

<ol>
    <li>
        <div style="display: flex;">
            <div>Giraffe</div>
            <div>Lion</div>
            <div>Koala Bear</div>
        </div>
    </li>
</ol>

由于某种原因，谷歌浏览器在动物上方放置了空行，如下所示：

1.
   GiraffeLionKoala Bear

为什么会这样以及如何预防？即使我手动设置宽度，它的行为也是如此。

在 Chrome、FF 和 Safari 上测试。只有谷歌浏览器是问题所在。

【问题讨论】：

哇，这太棒了，为什么要这么做？另一个很好的问题是为什么一个 li 中有一个 3 个 div 的 div？你不是只想把物品分成3 li 吗？无论哪种方式，我都会尝试修复它
@StefanBob 这只是我的 HTML 的一部分，它在整个上下文中都有意义 :) 这个 flexbox 包含一些文本和图标，并且只是每个 <li> 的标题。
几个月前，我实际上对这个问题进行了尝试。不是一件简单的事情。不得不悬赏这个问题。解释出乎意料地复杂。查看副本。

标签： css google-chrome flexbox

【解决方案1】：

显然，您的问题已经是asked before。

非常重要： 欺骗问题有 an answer 包含对原因的完整解释 (::marker)，下面接受的答案。

由于接受的答案目前似乎无法解决您的问题（使 flex 扩展 <li> 元素的整个宽度）。而且解释似乎也没有，这是一个实用的解决方案：

display: inline-flex;
width: 100%;

ol li .li-flex {
  display: inline-flex;
  width: 100%;
}

<ol>
    <li>
        <div class="li-flex">
            <div>Giraffe</div>
            <div>Lion</div>
            <div>Koala Bear</div>
        </div>
    </li>
</ol>

【讨论】：

请再次阅读我的问题。
我做到了。我会更新一个例子。告诉我这是否不是您想要的以及为什么不是（也许我没有正确理解所需的行为）。我将添加一些额外的 reset CSS，以覆盖默认浏览器样式。
我不想去掉编号。事情是内容上方的空行，就像我在预览中展示的那样。动物不符合编号。
我可以确认这是 Chrome 中的一个错误。在试图找到解决方法时（display:inline-flex 不好，因为它不跨越整个<li>）我还发现你的问题是a dupe。但是，那里没有很好的答案（在<li> 中没有一个表现得像正确的display:flex。
其实解释就在下面这个被骗问题中接受的答案中。 Check this out！基于此，我投票支持欺骗。虽然我不喜欢另一个问题，但目前有一个可接受的答案，它只说“我不知道为什么”，下面还有一个解释它。

【解决方案2】：

将display: flex 更改为display: inline-flex;。

【讨论】：

但它应该是flex，而不是inline-flex。我那里也有其他元素。是的，我可以将inline-flex 包裹在<div> 中，但我更愿意知道发生了什么:)
所以也许使用float: left?
你知道，我可以想到 100 种解决方法，但我很好奇为什么会发生这种情况并进行了一些干净的修复。浮点数并不是真正用于此目的。