-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 に答える
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 に答える