0

2 レベルの順不同リストを使用して、インライン オプションの行を作成したいと考えています。

これが私のコードです：

<ul>
    <li>CHOICE ONE
        <ul class="children">
            <li>option a</li>
            <li>option b</li>
            <li>option c</li>
        </ul>
    </li>
    <li>CHOICE TWO
        <ul class="children">
            <li>option d</li>
            <li>option e</li>
        </ul>
    </li>
    <li>CHOICE THREE</li>
</ul>

次のように表示したいと思います。

選択肢 1 選択肢 a 選択肢 b 選択肢 c 選択肢
2 選択肢 d 選択肢 e 選択肢
3

CSSでこれを行うにはどうすればよいですか? カスタム ID またはクラスを UL または LI タグに追加する機能がありません。

ありがとうございました！

4

3 に答える 3

0 
ul, li {list-style:none; margin:0; padding:0;}
ul ul, ul ul li {display:inline;}

http://jsfiddle.net/e7hAF/

于 2013-09-27T17:38:43.873 に答える
0 
<html>
<head>
<style type="text/css">
ul li {display: block;}
ul li ul li {display: inline;}
.children {display: inline; padding-left: 0px;}
</style>
</head>
<body>
<ul>
    <li>CHOICE ONE
        <ul class="children">
            <li>option a</li>
            <li>option b</li>
            <li>option c</li>
        </ul>
    </li>
    <li>CHOICE TWO
        <ul class="children">
            <li>option d</li>
            <li>option e</li>
        </ul>
    </li>
    <li>CHOICE THREE</li>
</ul>
</body>
</html>
于 2013-09-27T17:43:25.117 に答える