CSS3：列表項的頂部對齊

查看圖片如下。我怎樣才能對齊一個藍色的箭頭來對齊每個列表的一個地位。我使用的是jQuery 1.7，它適用於iOS（iPhone）。

align top http://www.kerrydeaf.com/align.png

ul.lists{ padding:0 0 15px 0;} 
ul.lists li{ line-height:18px; border-bottom:1px #bfeaf0 solid; padding:6px 12px;  
background:url(../images/arrow_cyan.svg) no-repeat left; } /* no-repeat left top; */

我試圖包括JS膠印 $（「李：最後一個」）偏移（{頂：-15}）。但它沒有正常工作，因爲我不知道如何移動所有的藍色箭頭來對齊每個列表，即使這句話可能會運行到多行。

更新：我已經試過這...

Top align http://www.kerrydeaf.com/align2.png

background:url(../images/arrow_cyan.svg) no-repeat left top;

最後更新：它現在解決了。 background：url（../ images/arrow_cyan.svg）no-repeat left 10px;

Top align http://www.kerrydeaf.com/align3.png

來源

2012-09-08 Irishgirl

嘗試你的第三個CSS行更改爲：'背景：網址（../圖像/ arrow_cyan.svg）不重複左上角; ' – mqchen

使用CSS，盧克

ul.lists li { 
    background:url(../images/arrow_cyan.svg) no-repeat left top; 
}

來源

2012-09-08 21:39:30

我試過這個，這就是我上面看到的圖像。 – Irishgirl

用您需要的精確像素偏移替換頂部參數（5px或6px或更多/更少）。一些嘗試和一切將看起來像你需要的一樣好。 –

你的意思是添加更多的白色圖形來實現它或添加5ppx或6px而不是'頂部'？ – Irishgirl

我認爲你可以

background-position:left top;

大衛，

來源

2012-09-08 21:38:31 David

爲此使用了可能爲負縱向價值背景，地位應該工作。確切的價值，你必須通過試驗和錯誤來確定。

來源

2012-09-08 21:38:43 Asciiom

是的，它是反覆試驗。 – Irishgirl

CSS3：列表項的頂部對齊

回答

相關問題