html - CSS:在列表项中向左浮动图像和文本，图像下方没有文字换行

Question

场景:

我有一个盒子(300 像素宽 x 300 像素高。)我在这个盒子里有一个无序列表，它有四个列表项。每个元素都包含一个缩略图图像 (32X32)、一个直接位于缩略图右侧的链接，然后是链接下方下一行的一串文本。

注意事项:

1. 我希望链接的顶部与图像的顶部对齐。
2. 文本字符串(发布日期)需要单独占一行，位于链接下方(但不能在图片下方换行。)

当前实现:

<ul>
<li><img class="thumb" src="baby.jpg"><a href="http://example.com" class="post-link">Post link title</a><br/>Date goes here</li>
<li>And again...</li>
<li>And again...</li>
<li>And again.</li>
</ul>

对于我的 CSS:

img .thumb {
float: left;
 width: 32px;
 height: 32px;
display: inline;
 }

a .post-link {
 float: left;
 display: inline;
 }

目前，我的图像在它自己的行上，然后文本在它下面。我又累又暴躁——这只是众多错误中的一个。帮助这个可怜又疲惫的家伙，好吗？

Answer 1

应该是img.thumb——没有空格；或者只是普通的 .thumb 如果你只将它用于 img 标签，同样适用于 a.post-link。

img.thumb 表示您的目标是具有类 .thumb 的 img 元素。

img .thumb 表示您的目标元素是 .thumb 类，其父元素是 img 元素。

CSS selectors for reference .