包含“float”元素的 HTML 列表项编号答案

【问题标题】：HTML List Item Number Displaced by Containing "float" Element包含“float”元素的 HTML 列表项编号
【发布时间】：2015-11-30 08:31:18
【问题描述】：

下面是两个有序列表项的 HTML 代码。我需要在其中一些列表项中插入一个带有float: left 的元素。但这会将编号向右移动：

.blob {
    float: left;
    width: 1cm;
    height: 5mm;
    background-color: #f00;
}

<ol>
    <li>Item 1</li>
    <li><div class="blob"></div> Item 2</li>
</ol>

我们如何避免这种情况？我更喜欢没有 JavaScript 的解决方案。

要明确：我希望数字在彼此下方，红色框位于第二项的文本左侧。

更新：此问题仅出现在 Chrome 中。

【问题讨论】：

标签： html css

【解决方案1】：

不要使用float，改用display:inline-block。

注意：正如@HiddenHobbes 在评论中提到的那样

[原始] 问题似乎只出现在 Chrome 中。

.blob {
    display: inline-block;
    width: 1cm;
    height: 5mm;
    background-color: #f00;
}

<ol>
    <li>Item 1</li>
    <li><div class="blob"></div> Item 2</li>
</ol>

【讨论】：