頂部對齊的無序列表的文本

以下是我的代碼，其中我使用內聯樣式將文本與相應的圖像頂部對齊，但內聯的css不能正常工作讓我知道如何修改下面的代碼，所以文字將與相應的圖像對齊。頂部對齊的無序列表的文本

<ul style="font-size:17px;vertical-align:top; margin-top:0;"> 
<li style="list-style-image: url(images/check.png);">Text is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to top</li> 
<li style="list-style-image: url(images/check.png);">Text is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to topText is not aligning to top</li> 

</ul>

來源

2013-01-07 soft genic

您可以加入您的列表項的形象呢？ – Malkus

@MikeB使用這個網址http://img253.imageshack.us/img253/149/02yespw9.gif對於圖像，並使用div的寬度100px –

問題不在於你的代碼。

你甚至可以刪除一些不必要的標記。

您的圖像導致頭痛。它需要進行調整，以便您的子彈與文本對齊。

我做了一些修補，它是圖像的大小。圖像高度比您需要縮放的圖像高度更高

此外，您還必須小心verticle-align它並不總是像您期望的那樣工作。爲你的背景IMG爲左中心Reference

來源

2013-01-07 15:46:33 Malkus

好的，謝謝邁克解釋它..... –

'鏈接的小提琴'鏈接已損壞。你能恢復它嗎？ –

@Barnee對不起，我環顧四周，無法找到我引用的小提琴。我拿出了參考資料，但是關於被問到的問題，這是圖像尺寸的一個問題。 – Malkus

您正在嘗試創建媒體塊，這是網絡中最常見的組件之一。 Nicole Sullivan是CSS中最着名的人物之一，他有一篇很棒的文章，談論媒體塊的性質，並給出了一個很好的標準實現。

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

我強烈建議使用任何執行她或閱讀她的學習它是如何做。

來源

2013-01-07 15:28:11 Nate

那麼我已經做了什麼被告知在那裏，但我想我應該這樣做與'有序列表'，所以不可能使文本對齊頂部？ –

只需將媒體塊放入列表項中。這是媒體塊模式的優勢之一：它可以放在任何需要的環境中。說：是的，這是絕對可能的文本對齊與常規列表項目的頂部。看起來MikeB已經展示瞭如何做到這一點。 – Nate

設定位置

來源

2013-01-07 15:51:10 allpnay

頂部對齊的無序列表的文本

回答

相關問題