0

我想使用一个两级无序列表来创建行内联选项。

这是我的代码：

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

我希望它显示如下：

选项一 选项 a 选项 b 选项 c 选项
二 选项 d 选项 e 选项
三

如何在 CSS 中做到这一点？我无法将自定义 ID 或类添加到 UL 或 LI 标签。

谢谢！

4

3 回答 3

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 回答
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 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul li ul, ul ul li {
    display: inline-block;
}

见 JsFiddle

于 2013-09-27T17:39:42.760 回答