如何在同一行上獲取這些元素？

我有聯繫，並精靈形象我想在一個線呈現垂直居中：如何在同一行上獲取這些元素？

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，但我不會在公開網址

來源

2011-05-31 Justin Meltzer

設置你的div顯示內聯塊，以便一切都會保持在一行。你想鏈接，然後與圖像的中心對齊？

http://jsfiddle.net/gUrc9/

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

UPDATE：正如註釋直列塊未在IE6/7支持，除非該元素是施加指出了是naturally inline。所以更好的解決方案是將div更改爲span。

span.sprite { display: inline-block; }

來源

2011-05-31 03:30:53 mrtsherman

有沒有想過，但內聯塊將無法在IE6,7上工作。儘管thr在這裏是跨瀏覽器的修復，但這只是額外的CSS。從正確的音符開始，你會更好。 DIV對這裏的事業沒有幫助。 – a6hi5h3k 2011-05-31 03:39:53

同意他應該使用默認內聯的元素，比如你所建議的span。 IE 6/7支持內聯塊，只要原始元素默認爲內聯。至少根據QuirksMode。我會更新我的答案。謝謝您的幫助。 – mrtsherman 2011-05-31 03:46:00

你將需要設置你的指針DIV有我的精靈圖像內嵌顯示：

#pointer { display: inline;}

默認div標籤是塊級元素。這將迫使他們與其餘的項目內聯。

來源

2011-05-31 03:29:19 Dan

我會從一個改進開始。 DIV被顯示爲塊，所以如果你使用精靈，那麼你必須給它一個高度的寬度，在這種情況下，選擇SPAN。

現在圍繞它們包圍一個div，並給它一個樣式：text-align: center;。或者你也可以給這個外部DIV一個寬度。並做一個margin: auto;。

來源

2011-05-31 03:32:02 a6hi5h3k

對於指針，您最好使用<span> - <div>用於對相關元素進行分組 - 但事實並非如此。它也會自動坐在同一行上，因爲跨度是內聯元素。

來源

2011-05-31 03:32:28 Beejamin

如何在同一行上獲取這些元素？

回答

相關問題