如何将这些元素放在同一行？

Question

我想要在垂直居中的一行中渲染链接和精灵图像：

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，但我没有公共网址上的精灵图片

Answer 1

您需要将指针div设置为内联显示：

#pointer { display: inline;}

默认情况下，div标签是块级元素。这将迫使他们与其他项目内联。

Answer 2

将div设置为显示内联块，以便一切都保持在一行。您是否希望链接与图像的中心对齐？

http://jsfiddle.net/gUrc9/

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

更新： 正如在注释中指出的那样，IE6 / 7中不支持内联块，除非它应用的元素是naturally inline。因此，更好的解决方案是将div改为span。

span.sprite { display: inline-block; }

Answer 3

我会从一个改进开始。 DIV显示为块，所以如果您使用精灵，无论如何都要给它一个宽度为n的高度，在这种情况下去SPAN。

现在将div包裹起来并给它一个样式：text-align: center;。或者你也可以给这个外部DIV一个宽度。并做一个margin: auto;。

Answer 4

最好使用<span>作为指针 - <div>用于对相关元素进行分组 - 但事实并非如此。它也会自动位于同一行，因为span是一个内联元素。