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;

最后更新：现在已经解决了。背景：url（../images/arrow_cyan.svg）不重复左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

使用可能为负垂直值的背景位置应该可以工作。您必须通过反复试验确定的确切值。

于 2012-09-08T21:38:43.157 回答