1

很抱歉不得不问这个问题，但我花了很多时间在这上面，我很难过。

我有一个多项选择题数据库，它们以 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>

谢谢！

4

1 回答 1

2

使用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 演示

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

于 2013-01-25T00:07:01.933 回答