Question

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

http://jsfiddle.net/BBmER/

如何围绕图像包装无序列表，以便即使li标签也不会与图像重叠？

Answer 1

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

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

或：

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

如果你想要它们之间有一些空间。

Answer 2

您可以使用一些边距和不透明图像来完成它。查看更新的 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;
}

Answer 3

我修改了你的新小提琴，这是你正在寻找的吗？

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

我做的是我

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

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

Answer 4

如何将overflow:hidden;添加到LI标签：
http://jsfiddle.net/BBmER/153/

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

4 个答案: