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只出現在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>