html - 各リスト項目の前にチェックボックスがあるインデントされた順序付きリストを表示するための CSS

Question

これが可能かどうかはわかりませんが、次のように、各リスト項目の前にチェックボックスを付けて順序付きリストを設定しようとしています:

この質問を使用してインデントを理解しましたが、チェックボックスをと同じ行に表示することができませんでした<li>。これを行う方法はありますか？

score 6 · Accepted Answer

あなたはこのようなことをすることができます。入力をリストアイテム内に配置し、リストアイテムの前に表示されるように絶対位置に配置します。

最も関連性の高いCSS：

li input
{
    position: absolute;
    margin-left: -40px;
    margin-top: 5px;
}

score 1 · Accepted Answer

私はあなたに基づいて新しいjsFiddleを作成しました：http：//jsfiddle.net/3VESY/1/

基本的に、テキストをスパン（divの場合もあります）に配置し、入力にフロートを配置しました。スパンには、インデントを作成するための左のパディングがあります。それがあなたが必要としていたことを願っていますか？

ol {
    list-style-type:decimal;
    margin-left:20px;
}

ol li span {
    display:block;
    padding-left:30px;
}
input
{
    float:left;
}

更新されたフィドルを編集します：http：//jsfiddle.net/3VESY/1/番号を追加します

3 に答える 3