1

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!

kapa
  • 77,694
  • 21
  • 158
  • 175
Jaemaz
  • 35
  • 1
  • 8
  • Is there a reason you cant change the HTML? If you could then you could use an ordered list (
      ) with list-style-type:lower-alpha
     – rogchap Jan 24 '13 at 23:55
  • @rogchap -- the html can't be changed because the actual production structure includes an extra div within the simple-choice div that contains item feedback. That, and there are thousands of these created already, and the code replacement we would have to do on those would be a nightmare. :) Thanks for your participation. – Jaemaz Jan 25 '13 at 14:18

1 Answers1

2

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.

kapa
  • 77,694
  • 21
  • 158
  • 175
  • Thanks @bažmegakapa -- that is spot-on. And yes, the block thing is there as a relic from an earlier build -- it will certainly be addressed. – Jaemaz Jan 25 '13 at 14:19