为什么<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

＆＃13;

＆＃13;

ul {
  overflow: hidden;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以更改list-style-position：

find

ul {
  list-style-position: inside;
}