使用单选按钮将字母(a，b，c)附加到问题

Question

很抱歉不得不问这个问题，但我花了相当多的时间在它上面，并被难住了。

我有一个多项选择题的数据库，这些问题出现在文档中，每组4-8个问题。我需要这些问题按照它们出现的顺序(a，b，c，d，e，f等)来排列。我不能改变html或者html的结构。

有没有一种纯CSS的方式来实现这一点？如果没有，你会有什么建议？我已经粘贴了下面一个问题的结构，但这里包含了完整结构的示例：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>

谢谢!

Answer 1

使用display: list-item;，您可以使div的行为类似于列表项，这意味着它们可以获得标记。如果您将list-style-type设置为lower-alpha，您将收到所需的内容，小写字母作为标记。

/* 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

我必须指出，正确的方法是修复HTML。您应该使用<ol>元素，该元素用于有序列表。但有一件事需要确定:每个项目上的id="block"。ID在整个文档中必须是唯一的，因此您只能使用它们一次。不这样做会使您的HTML失效，并可能在将来导致奇怪的问题。