Question

当浮动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>

修改

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

Answer 1

您可以在ol

上使用list-style-position: inside

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>

Answer 2

另一个需要考虑的选择是：

ol {overflow: hidden;}

Answer 3

您可以使用ul的margin / padding属性修复它，或者只添加css：

li{list-style:num inside;}

https://jsfiddle.net/pnwgLjan/4/

Answer 4

你需要但是其他div中的列表有这样的浮动

<div style=float:left;></div><div style=float:left;><ol></ol></div

https://jsfiddle.net/w9bhd3jn/

Answer 5

另一种选择只是向div添加右边距：

margin-right: 30px;

div {
  float: left; 
  width: 10em; 
  height: 10em; 
  background-color: lightblue;
  margin-right: 30px;
}

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

Answer 6

我认为最好的方法是使用css计数器递增每个li项目并将其输出为：before。然后，您可以使用填充，边距（以首选为准）。

使用这种方法，您也可以根据需要设置列表项目编号的样式。而不是坚持默认样式。

以下是如何使用CSS增量。像魅力一样工作:)

https://css-tricks.com/almanac/properties/c/counter-increment/

如何在css中正确浮动div和编号列表？

6 个答案: