Vertical-align UL LI elements for multi-line text

Question

I have a ul list which has a few single and some multi-line li text.. Now for the multi-line text, the 2nd line of text starts at a different indentation than the 1st line of text.

I want a very basic approach to fix this issue which should be cross-browser compatible.

Just to add, I want some space between the ul and a neighboring image (so kind of margin)

My HTML and CSS;

<div class="fl">
    <div class="resDtp2"><img src="images/book1.gif"></div>
    <ul class="resDtp2 txtSmall">
        <li class="resDtpPad"><span>Some text Some text Some text</span></li>
        <li class="resDtpPad"><span>Some text</span></li>
    </ul>
</div>


div.resDtp1{float:none}
div.resDtp2{float:left}
ul li.resDtpPad{text-align: left;}

Answer 1

您可以给li设置一个左填充，应该这样做