Append letters (a, b, c) to questions with radio buttons

Question

Sorry to have to ask this, but I've spent quite a bit of time on it and am stumped.

I have a database of multiple-choice questions that appear in documents in sets of 4–8 questions. I need these questions to be lettered in the order they appear (a, b, c, d, e, f, etc.) and I can't change html or the structure of the html.

Is there a pure CSS way to accomplish this? And if not what would you suggest? I've pasted the structure for one question below, but an example of the full structure is included here: http://jsfiddle.net/Jaemaz/JrqMr/1/

<div class="simple-choice-inner">
<div class="choiceInput">
<span class="prompt"><input type="radio"></span>
</div>
<div class="choice-content">
<div class="item_options" id="block">
<span class="prompt">Here is the 2nd possible selection.</span>
</div>
</div>
</div>

Thanks!

Answer 1

Using display: list-item;, you can make divs behave as list items, which means they can get markers. If you set the list-style-type to lower-alpha you will receive just what you need, lowercase letters as markers.

/* the important part */
.simple-choice-inner {
    display: list-item;
    list-style: lower-alpha inside;
    clear: left; /* clearing the radio floats */
}

/* make the child divs appear as inline content, in one line */
.simple-choice-inner div {
    display: inline-block;
}

/* this is only used to make the radios appear before the letters */
.simple-choice-inner .choiceInput {
    float: left;
    margin-right: 10px;
}

jsFiddle Demo

I must point out that the right way would be to fix the HTML. You should use an <ol> element, which is for an ordered list. But one thing needs to be fixed for sure: that id="block" on every item. IDs must be unique in the whole document, so you can use them only once. Not doing so invalidates your HTML and might cause strange problems in the future.