我有一个浮动图像，后面跟着一个无序列表。默认情况下，这会导致列表项目符号与图像重叠。
img {
float: left;
}<img src="https://picsum.photos/200/100" />
<ul>
<li>A list element.</li>
<li>An element with some text that might be long enough to wrap to the next line. That sentence won't do it, but maybe if I add another I can demonstrate this issue.</li>
<li>Another simple element</li>
<li>Number 4</li>
<li>A fifth</li>
<li>Now this one should be below the image.</li>
</ul>正如这个问题所指出的，overflow: hidden解决了重叠，但一旦到达图像的底部，就会导致列表元素不再左对齐。
list-style-position: inside将项目符号移到图像之外，但使项目中的文本不再一致对齐(即第一行偏移项目符号，其余部分与项目符号而不是第一行对齐(。
img {
float: left;
}
ul {
list-style-position: inside;
}<img src="https://picsum.photos/200/100" />
<ul>
<li>A list element.</li>
<li>An element with some text that might be long enough to wrap to the next line. That sentence won't do it, but maybe if I add another I can demonstrate this issue.</li>
<li>Another simple element</li>
<li>Number 4</li>
<li>A fifth</li>
<li>Now this one should be below the image.</li>
</ul>有可能以一种简单地做正确事情的方式来做到这一点吗？
编辑：我还想以一种方式设置它，允许浮动元素旁边的非列表文本正常运行，所以仅仅添加边距也不起作用
重新确定答案，因此您确实需要浮点运算。由于你希望它也能与文本一起使用，我添加了答案。列表会自动获取应用于它们的填充。问题可能就在那里。
img {
height:auto;
max-width:200px;
margin-right:20px;
float:left;
}
img {
overflow:hidden;
}
ul {
padding-left:20px;
max-width:500px;
}<div class="row">
<img src="https://picsum.photos/200/100" />
<ul>
<li>A list element.</li>
<li>An element with some text that might be long enough to wrap to the next line. That sentence won't do it, but maybe if I add another I can demonstrate this issue.</li>
<li>Another simple element</li>
<li>Number 4</li>
<li>A fifth</li>
<li>Now this one should be below the image.</li>
</ul>
</div>
<div class="row">
<img src="https://picsum.photos/200/100" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>我不确定这是否是你想要的，但如果你想让所有列表项都显示在你的图片旁边，你可以试试这样的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.picture {
shape-outside: initial;
float: left;
margin-inline-end: 1em;
min-width: 13em;
width: 30%;
padding: 3px;
}
</style>
</head>
<body>
<article>
<h1> Header </h1>
<img class="picture" src="https://picsum.photos/200/100" />
<ul>
<li>A list element.</li>
<li>An element with some text that might be long enough to wrap to the next line. That sentence won't do it, but maybe if I add another I can demonstrate this issue.</li>
<li>Another simple element</li>
<li>Number 4</li>
<li>A fifth</li>
<li>Now this one should be below the image.</li>
</ul>
</article>
</body>
</html>
使用一些text-indent的内部配置可以修复它：
img {
float: left;
margin-right:1.7em; /* a litte bigger than the text-indent */
}
ul {
list-style-position: inside;
text-indent:-1.5em; /* adjust this based on your case */
}<img src="https://picsum.photos/200/150" />
<ul>
<li>A list element.</li>
<li>An element with some text that might be long enough to wrap to the next line. That sentence won't do it, but maybe if I add another I can demonstrate this issue.</li>
<li>Another simple element</li>
<li>Number 4</li>
<li>A fifth</li>
<li>Now this one should be below the image.</li>
</ul>使用翻译的另一个想法可以处理任何类型的内容：
img {
float: left;
}
ul {
padding:0;
}
li {
transform:translateX(1.5em);
margin-right:1.5em;
}<img src="https://picsum.photos/200/150" />
<p>An element with some text that might be long enough to wr </p>
<ul>
<li>A list element.</li>
<li>An element with some text that might be long enough to wrap to the next line. That sentence won't do it, but maybe if I add another I can demonstrate this issue.</li>
<li>Another simple element</li>
<li>Number 4</li>
<li>A fifth</li>
<li>Now this one should be below the image.</li>
</ul>