如何用浮动元素很好地包装 <ul>？答案

【问题标题】：How to make a <ul> wrap nicely with floating elements?如何用浮动元素很好地包装 <ul>？
【发布时间】：2020-12-02 01:50:52
【问题描述】：

我有一个浮动图像，后跟一个无序列表。默认情况下，这会导致列表项目符号与图像重叠。

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>

正如this question 所指出的，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>

是否有可能以一种简单的方式做到这一点？

编辑：我还想以允许浮动元素旁边的非列表文本正常运行的方式进行设置，因此仅添加边距也不起作用

【问题讨论】：

标签： css alignment css-float html-lists

【解决方案1】：

我不确定这是否是您想要的，但如果您希望所有列表项都显示在您的图片旁边，您可以尝试这样的操作。

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

【讨论】：

这适用于这种特定情况，但会导致图像和列表之间的任何文本也缩进到列表文本的级别
您希望/希望在这种情况下发生什么？您能否发布一些“minimal reproducible example”代码来重现该问题并解释（或显示图像）您希望它如何表现？
我希望文本和列表项之间的缩进差异与通常情况相同，其中列表进一步缩进
同意@DavidsaysreinstateMonica，一个例子将是这个场景的理想选择。

【解决方案2】：

带有一些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>

【讨论】：

查看我的编辑，我需要它也适用于非列表，因为这些样式将应用于用户生成的内容。此解决方案导致非列表文本比列表缩进更多

【解决方案3】：

重做答案，因此您确实需要花车。由于您希望它也可以与文本一起使用，因此我已将其与答案一起添加。列表会自动获取应用于它们的填充。问题可能就在那里。

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>

【讨论】：

这和overflow: hidden有同样的问题：这些项目都在图像的右边，而我希望它们中的一些回到左边
是的，误解了这个问题，所以我更新了它！