html - 我怎样才能让这些元素在同一行？

Question

我有链接和一个 Sprite 图像，我想在垂直居中的一行中呈现:

HTML:

<a href="/videos/12" class="normal video_title">Why Eminem is the best</a>
<div class="sprite" id="pointer"></div>
by
<a href="/profiles/1" class="feed_image"><img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692"></a>
<a href="/profiles/1" class="normal squeeze">Justin Meltzer</a>

如何将所有这些元素放在一行中？

我会做一个 jsfiddle，但我没有在公共(public) url 上的 sprite 图片

Answer 1

将您的 div 设置为显示内联 block ，这样所有内容都将保持在一行中。您希望链接随后与图像中心对齐吗？

http://jsfiddle.net/gUrc9/

div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }

更新: 正如评论中指出的那样，IE6/7 不支持内联 block ，除非它所应用的元素是 naturally inline。 .因此更好的解决方案是将 div 更改为 span。

span.sprite { display: inline-block; }