为什么 <li> 在 <img> float:left 旁边没有缩进？

Question

当我在浮动左侧的图像旁放置一个 <ul> 时，项目符号会重叠在图像上，并且整个 <ul> 没有像预期的那样从左边距缩进。

我该如何解决这个问题？

In the example below, compare the position of the bullets and text in the first <ul> (text lines up under "e" in "camera") to the second <ul> (text ends up under the "A"):

<p>A camera has:</p>

<ul>
  <li>Lens</li>
  <li>Box</li>
  <li>Sensor</li>
</ul>

<img style="float:left" src="http://nerdfever.com/wp-content/uploads/2012/05/imgres.jpg" alt="Camera" />

<p>A camera has:</p>

<ul>
  <li>Lens</li>
  <li>Box</li>
  <li>Sensor</li>
</ul>

这将给出如下结果：

- nerdfever.com

Answer 1

您需要控制溢出。您可以添加overflow: hidden或overflow: auto

ul {
  overflow: hidden;
}

<p>A camera has:</p>

<ul>
   <li>Lens</li>
   <li>Box</li>
   <li>Sensor</li>
</ul>

<img style="float:left" src="http://nerdfever.com/wp-content/uploads/2012/05/imgres.jpg" alt="Camera" />

<p>A camera has:</p>

<ul>
   <li>Lens</li>
   <li>Box</li>
   <li>Sensor</li>
</ul>

- Michael Coker

Answer 2

您可以更改列表项的位置：

ul {
  list-style-position: inside;
}

<p>A camera has:</p>

<ul>
  <li>Lens</li>
  <li>Box</li>
  <li>Sensor</li>
</ul>

<img style="float:left" src="http://nerdfever.com/wp-content/uploads/2012/05/imgres.jpg" alt="Camera" />

<p>A camera has:</p>

<ul>
  <li>Lens</li>
  <li>Box</li>
  <li>Sensor</li>
</ul>

- StefanBob