1

申し訳ありませんが、私はかなりの時間を費やして困惑しています。

4〜8個の質問のセットでドキュメントに表示される多肢選択式の質問のデータベースがあります。これらの質問は、表示される順序（a、b、c、d、e、fなど）で文字を付ける必要があり、htmlまたはhtmlの構造を変更できません。

これを達成するための純粋なCSSの方法はありますか？そうでなければ、あなたは何を提案しますか？以下の1つの質問の構造を貼り付けましたが、完全な構造の例がここに含まれています：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 をリスト アイテムとして動作させることができます。つまり、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>順序付きリスト用の要素を使用する必要があります。しかし、確実に修正する必要があることが 1 つあります。それid="block"は、すべてのアイテムについてです。ID はドキュメント全体で一意である必要があるため、一度しか使用できません。そうしないと、HTML が無効になり、将来的に奇妙な問題が発生する可能性があります。

于 2013-01-25T00:07:01.933 に答える