通过包含“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在评论

中提及

  

[原始]问题似乎只出现在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>