Question

我有以下HTML：

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

出于某种原因，Google Chrome会在动物上面留空线，如下所示：

1.
   GiraffeLionKoala Bear

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

在Chrome，FF和Safari上测试过。只有Google Chrome才是问题所在。

Answer 1

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

非常重要： 欺诈问题an answer包含原因的完整说明（::marker），低于接受的答案。

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

display: inline-flex;
width: 100%;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Flexbox在Chrome中的<li>中放入空行

2 个答案: