css - 如何在CSS中正确 float div和编号列表？

Question

当 float 一个 div 时，它周围的列表编号不合适。数字在 div 中而不是在它之外。如何正确地做到这一点？ Fiddle

div {
  float: left; 
  width: 10em; 
  height: 10em; 
  background-color: lightblue;
}

<div></div>
<ol>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ol>

编辑

我想到的结果是编号列表保持默认格式，但就像在任何普通编写器应用程序中一样在列表中 float 。

Answer 1

您可以使用 list-style-position: inside在 ol

上

div {
  float: left; 
  width: 10em; 
  height: 10em; 
  background-color: lightblue;
}

ol {
 list-style-position: inside;
}

<div></div>
Test
<ol>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ol>