Как я могу получить эти элементы в одной строке?

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

Было бы лучше использовать <span> для указателя - <div> для группировки связанных элементов - чего не происходит.Он также будет автоматически находиться на одной и той же строке, потому что span является встроенным элементом.

Answer 2

Установите ваш div для отображения встроенного блока, чтобы все оставалось на одной строке.Вы хотите, чтобы ссылки были затем выровнены по центру изображения?

http://jsfiddle.net/gUrc9/

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

ОБНОВЛЕНИЕ: Как указано в комментариях, inline-block не поддерживается в IE6 /7, если элемент, к которому он применяется, не является естественно встроенным .Поэтому лучшим решением было бы изменить div на span.

span.sprite { display: inline-block; }

Answer 3

Я бы начал с одного улучшения. DIV отображаются в виде блока, поэтому, если вы используете спрайт, вы все равно зададите ему ширину и высоту, в этом случае перейдите к SPAN.

Теперь оберните вокруг них div и задайте ему стиль: text-align: center;. Или вы могли бы также дать этому внешнему DIV ширину. и сделать margin: auto;.

Answer 4

Вам нужно установить указатель div для отображения в строке:

#pointer { display: inline;}

По умолчанию теги div являются элементами уровня блока. Это заставит их совмещаться с остальными предметами.