Loat or left -?

I have this:

<ul>
<li>
1. text here
a) 1st
b) 2nd
</li>
</ul>

Now I want to add an image before the correct version, keeping the alignments. How can I do that?

Thanks.

 

What do you exactly mean?

 

I needed something like this:


The "X" and "OK" should be images, the rest is text (<ul><li>)

I don`t want to add the image before the content, I want to add it with a div or something, using css (with float or a negative value for left I suppose).

 

<ul>
<li>
<span style="width:30px;">1.</span>text here<br />
<span style="width:30px;">X</span>a) 1st<br />
<span style="width:30px;">ok</span>b) 2nd<br />
</li>
</ul>

However, I don't see why you'll use <ul><li> for this.

 

Given that the first line has a number before it, I would assume there's going to be more than one of those, like a list of questions.

In which case I'd be using an ORDERED list. Since the inner group looks like a list of responses, I would make it an ordered list as well just with it's 'bullets' as alpha-lower. Then I'd just add a class to the 'wrong' ones leaving the 'correct' ones as the default behavior.

<ol id="questionList">
	<li>
		Question:<br />
		<ol>
			<li class="wrong">Wrong</li>
			<li>Correct</li>
		</ol>
	</li>
	<li>
		Question:<br />
		<ol>
			<li>Correct</li>
			<li class="wrong">Wrong</li>
		</ol>
	</li>
</ol>

Code (markup):

For the CSS, I'd set the list-style on #questionList to decimal, on #questionList ol set it to lower-alpha. Then on both I'd set list-style-position to inside, moving the 'bullets' inside the content allowing us to use the padding to place the images. Pad the left of #questionList OL LI to make room for the image, and since you are interfacing with images set to a px font and more important, a px line height. You can then use a single image for both states, simply sliding the background-position around for the 'wrong' answer.

For laughs, I'd probably also toss a color change on each of them for additional visual cues... or perhaps even a strike through the wrong answer. Hmm. Being it's a incorrect answer, maybe it should be wrapped in a DEL tag? Nah, that's overthinking it, though it would degrade CSS off better. (just remove the 'strike' from the text when CSS is present).

Something like this for CSS (untested):

#questionList {
	list-style:inside decimal;
	font:normal 14px/16px arial,helvetica,sans-serif;
}

#questionList ol {
	list-style:inside lower-alpha;
}

#questionList ol li {
	padding-left:24px;
	color:#080;
	background:url(images/status.png) 4px 0 no-repeat;
}

#questionList ol .wrong {
	color:#C00;
	background-position:4px -16px;
}

Code (markup):

status.png (or whatever you want to call it or use for format) should be a 16x32 image with the top half containing your checkmark, the bottom half containing your X.

Hope this helps, or at least gets you pointed the right direction. Since it looks like a list of a list, why not make it a list of a list?