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无效，并可能在将来引起奇怪的问题。

使用单选按钮在问题上附加字母（a，b，c）

1 个答案: