Question

CSS3: Top align of list item.

See image as below. How can I align a blue arrow to align on top of a senetence of each list. I’m using jQuery 1.7 and it is for 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; */

I’ve tried to include a js as offset
$(“li:last”).offset({ top: -15 });
but it did not work properly because I don’t know how to move all blue arrows to align each list even the sentence might run into more than one line.

UPDATE:
I’ve tried this…

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

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

LAST UPDATE:
It is now solved.
background:url(../images/arrow_cyan.svg) no-repeat left 10px;

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

Answer 1

Use CSS, Luke

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