如何在图像周围包装无序列表？答案

【问题标题】：How do I wrap an unordered list around an image?如何在图像周围包装无序列表？
【发布时间】：2014-09-08 08:15:16
【问题描述】：

在 HTML 中，我试图将 ul 标记包裹在图像周围。我需要正确数量的li 标签不与图像重叠，无论它们多高或多短。到目前为止，我可以让li 标签内的内容环绕图像，但不能让lis 本身环绕图像。由于每个li 标签都有一个底部边框，这还不够。你可以在这里看到我现在在哪里：

http://jsfiddle.net/BBmER/

如何将无序列表包裹在图像周围，这样即使 li 标签也不会与图像重叠？

【问题讨论】：

在您的示例中，您没有在图像周围包裹任何东西。您只是将图像浮动到右侧。不透明度是否必须为 0.5？
不透明度应该为 1，但我将其设置为 0.5，以表明 li 标记与图像重叠。
@j08691：文字环绕图片。
@MattiVirkkunen - 是的，我意识到浮动的最终效果是文字环绕图像。我指的是代码，并且 img 标记没有被列表包装。

标签： html css html-lists

【解决方案1】：

从左侧或右侧为 ul 元素提供足够的填充，使其不会与您的图像重叠。例如，如果您的图像向左浮动并且宽度为 300 像素，那么您的 ul 元素应该是：

<ul style="padding-left:300px">

或：

<ul style="padding-left:320px">

如果你想在它们之间留一些空间。

【讨论】：

【解决方案2】：

我稍微修改了你的新小提琴，这是你要找的吗？

http://jsfiddle.net/BBmER/21/

我做的是我

从描述中删除浮动，而只给它一个左边距（同时从标签中删除右边距，因为它不再需要）
从lis 中删除了 clear 技巧，因为它正在推动图像下方的第二个 li 并且
在li 元素上添加了clear: left;，以防万一标签较长。

这并没有改变li元素与图像重叠的事实，但至少标签和描述元素布局正确。

【讨论】：

这有帮助，谢谢！我将你的方法和 j08691 的方法结合起来，让它在除 IE7 之外的所有东西中都能正常工作（浮动文本没有完全对齐）。因为我实际上需要div.label 元素具有固定宽度，所以我改用了另一种方法来按照我想要的方式获取文本。你可以在这里看到我最终这样做的方式：jsfiddle.net/BBmER/22

【解决方案3】：

您可以通过一些边距和不透明的图像来完成它。查看更新后的 jsFiddle。

CSS：

body {
    font-family: arial, verdana, sans-serif;
    font-size:13px;
}

ul li {
    margin-bottom:15px;
    border-bottom:1px solid grey;
}

img {
    float: right;
    padding: 0 0 15px 15px;
    opacity: 1;
    background: #fff;
    margin: 0 0 10px 10;
}

【讨论】：

我有点期待“但是我的 <li> 元素的右边缘有东西，我不能让图像隐藏它们”
@MattiVirkkunen ，就是这样。在这种情况下，我的 <li> 标签每个里面都有两个 float:left; <div> 标签。使用我的 jsfiddle 显示的方法，display:block;<li> 标签内的内联内容正确环绕浮动<img> 标签，但 li 标签内的块级元素不起作用。我一直在寻找一个解决方案，其中<li> 标签本身正确环绕<img> 标签，以便每个
标签内的浮动元素自然地表现出与标签相关的行为。

我刚刚更新了我的 jsfiddle 以更准确地处理我实际处理的内容：jsfiddle.net/BBmER/20