为什么<UL>会进入浮动图像区域？

Question

为什么

<UL>

会进入浮动图像区域？这是一个例子https://codepen.io/vlad-tarasoffka/pen/xxevdwJ

margin-left

或

padding-left

上的

<UL>

或

<LI>

都不会给出所需的结果。 即使将

<UL>

放入

<DIV>

中，它也无法正确显示。

Answer 1

默认情况下，列表项目符号/编号放置在列表的外部。您所要做的就是在列表中使用

list-style-position: inside;

：

img {
  float: left;
  margin: 0.5em;
}

ul {
  list-style-position: inside;
}

<img src="https://via.placeholder.com/200.jpg">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>