<分区>
我有以下 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 上测试。只有谷歌浏览器是问题所在。
最佳答案
显然，您的问题已经 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>关于css - Flexbox 在 Chrome 中将空行放在 <li> 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43377640/