通过包含“ float”元素替换的HTML列表项目号

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>