-1

是否有一种简洁的方式来设置以下样式：

<ol>
   <li>How many licks to get to the center?
    <ol style="list-style-type: lower-alpha;">
        <li><input id="q1a" type="radio" name="q1" value="1" />
            <label for="q1a">One</label></li>
        <li><input id="q1b" type="radio" name="q1" value="2" />
            <label for="q1b">Two-hoo</label></li>
        <li><input id="q1c" type="radio" name="q1" value="3" />
            <label for="q1c">Three</label></li>
    </ol>
   </li>
</ol>

所以嵌套ol输出中的答案与标记左侧的单选气泡？

() a. One
() b. Two-hoo
() c. Three

到目前为止，我看到的所有答案要么需要作弊（辅助标记），要么来自 5 年前，要么需要定位输入，position: absolute如果我知道它们会可靠地与标记对齐并且我不会反对根据物品的长度，不会看起来像垃圾。

这是用 css3 或 html5 直接或间接解决的吗？

4

3 回答 3

3

一个非常酷的方法是使用 CSS 计算。

jsFiddle 演示

.letters-counter {
    counter-reset: my-counter;
}
.letters-counter li label:before {
    content: counter(my-counter, lower-alpha) ".";
    counter-increment: my-counter;
    display: inline-block;
}

进一步阅读：

于 2013-09-15T06:33:06.383 回答
1

我相信使用position:absolute应该可以工作，并且不依赖于项目的长度，以这个 CSS 为例：

ol li ol{
    padding-left: 0;
    list-style-position: inside; 
}

ol li ol li{
    position: relative;
    padding-left: 2em; 
}

ol li ol li input[type="radio"]{
    position: absolute;
    left: 0; 
}

唯一的事情是您可能需要调整填充以在输入和标签之间创建空间。

这是一个演示小提琴

于 2013-09-15T06:37:15.030 回答
0

也许你可以做一点作弊但不多。

<ol>
    <li>How many licks does it take to get to the center?
        <ol class="answerList">
            <li><input type="radio" id="q1a" name="q1" value="1" /><span>a.</span><label for="q1a">One</label></li>
            <li><input type="radio" id="q1b" name="q1" value="2" /><span>b.</span><label for="q1b">Two-hoo</label></li>
            <li><input type="radio" id="q1c" name="q1" value="3" /><span>c.</span><label for="q1c">Three</label></li>
        </ol>
    </li>
</ol>

然后造型...

<style>
    .answerList{list-style-type:none;}
    .answerList span{font-weight:bold;}
</style>
于 2013-09-15T06:18:42.370 回答