1

我的问题与此类似，但我的无序列表img在s 内。li

以下是我的标记。（将其视为评论的 UI，如在 Facebook 或 G+ 中，评论文本和用户的个人资料图片缩略图并排显示）

<ul class="comments">
    <li><img src="thumb.jpg" class="user-img" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li><img src="thumb.jpg" class="user-img" />Aliquam tincidunt mauris eu risus.</li>
    <li><img src="thumb.jpg" class="user-img" />Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
    <li><img src="thumb.jpg" class="user-img" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>

以下是相同的CSS。

.comments {
    list-style-type: none;
    clear: both;
}

.comments li {
    padding: 3px;
    font-size: 12px;
}

.comments li img {
    margin-right: 10px;
}

我得到的结果如下：

丑陋的列表文本缩进

因为很明显，当文本不适合宽度时，它会低于我不想要的图像。如何保持对齐而不是在缩略图下方流动？

笔记：

用于列表项的图像不打算用作list-style-image，这是原型设计，每个图像将不同li。

4

2 回答 2

2

您可以使用：

.comments
{
list-style-image:url('thumb.jpg');
}
于 2012-10-18T14:09:54.087 回答
1

如果每个 li 的缩略图图像不同，请使用此演示

如果所有 li 的缩略图图像都相同。做这个 -

.comments li {
    background: url(thumb.jpg) no-repeat left top;
    padding: 0 0 10px 50px;
    font-size: 12px; min-height: 44px; /*thumb image height*/
}
于 2012-10-18T14:20:59.133 回答