0

CSS3: リスト項目の上揃え。

以下の画像を参照してください。各リストの文の上に青い矢印を揃えるにはどうすればよいですか。jQuery 1.7 を使用しており、iOS (iPhone) 用です。

上に整列 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 をオフセット $("li:last").offset({ top: -15 }); として含めようとしました。しかし、文が複数の行にまたがる可能性がある場合でも、すべての青い矢印を移動して各リストを整列させる方法がわからないため、適切に機能しませんでした.

更新：私はこれを試しました...

上揃え 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;

上揃え http://www.kerrydeaf.com/align3.png

4

3 に答える 3

1

これでできると思います

background-position:left top;

デビッド、

于 2012-09-08T21:38:31.797 に答える
1

CSS を使用する、ルーク

ul.lists li {
  background:url(../images/arrow_cyan.svg) no-repeat left top; 
}
于 2012-09-08T21:39:30.100 に答える
0

おそらく負の垂直値で background-position を使用するとうまくいくはずです。試行錯誤によって決定する必要がある正確な値。

于 2012-09-08T21:38:43.157 に答える