1

私の問題はこれに似ていますが、順序付けられていないリストの simg以内にあります。li

以下は私のマークアップです。(Facebook や G+ のようなコメント用の UI と考えてください。コメント テキストとユーザーのプロフィール写真のサムネイルが並べて表示されます)

<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 に答える