HTML 列表元素编号被包含 "float"元素取代

Question

下面是两个有序列表项的 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 中。

Answer 1

不要使用float，而是尝试使用display:inline-block。

注意:正如@HiddenHobbes 在评论中提到的

the [original] issue only appears to occur in 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>