Question

是否有一种简洁的造型方式：

<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直接或间接解决的？

Answer 1

一种非常酷的方式是使用CSS计算。

jsFiddle Demo

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

进一步阅读：

Answer 2

我相信使用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; 
}

唯一的问题是你可能需要调整填充以在输入和标签之间创建空格。

这是 demo fiddle

Answer 3

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

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

位置无线电输入外部列表标记

3 个答案: