2012-04-10 59 views
2

我有一個簡單的CSS問題,我的手在這裏 - 我這樣想着... - 在這裏我基本上只是想創建一個很好的靠左對齊使用::before僞元素與生成content: "» "作爲列表標記列表(ul) 。CSS:爲什麼這些列表元素的縮進不排隊?

現在重要的是我嘗試儘管我根本無法重現從這A List Apart: Taming Lists文章的結果。在鏈接的例子中,列表正是我想如何設計我的風格。

我已複製的JS小提琴這裏足見其對齊文本問題的例子:http://jsfiddle.net/jannis/f8TxN/

這裏也是一個快速的圖像來說明這一點更好。從ALA左側例子,我在正確的版本:

List Misalignment

但是,你將能夠在小提琴看出,li內的第一線,根本不會留下對齊的休息本文內容爲li

我真的很感謝有人看一看,並告訴我我在這裏做錯了什麼。

許多感謝您的閱讀,

Jannis

回答

2

這是對<ul>text-indent: -1em;導致該問題。將其設置爲固定值-13px可修復小提琴。

但是,根據生成的內容的寬度(尤其受所使用的font-size影響)的寬度,如果要繼續使用值,則可能需要不同的值。 px與當前字體無關。

僅添加了text-indent,因此作者知道生成的內容會向前推送第一行。我假設所選擇的值符合原始文章在任何瀏覽器和字體被使用。

將以下CSS(來自ALA文章)複製到小提琴font-family: Verdana, sans-serif;font-size: 11px;中,在我的瀏覽器中更正了對齊方式。

1

在我眼中,即使是ALA版本也是一個(幾個?)像素,並且遠非完美,儘管它們與您有相反的問題,其中第一行的文本比其他文本更深。

我得到了你的榜樣,通過改變工作下面從-1em到-0.85em:

text-indent: -0.85em; 

即使使用不同的字體大小,這仍然工作。

它看起來像使用的字符的寬度也被考慮在內,所以你的例子和ALA之間的差異的原因甚至可以歸結爲使用的字體。