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

Question

当我把 <ul>在 float:left 图像旁边，元素符号与图像重叠，整个 <ul>未按预期从左边距缩进。

我该如何解决这个问题？

在下面的示例中，比较第一个 <ul> 中元素符号和文本的位置(文本在“相机”中的“e”下方排列)到第二个 <ul> (文本在“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>

这给出:

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>