Question

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

这是我的代码：

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

我希望它显示如下：

CHOICE ONE选项a选项b选项c
  选择二选项d选项e
  选择三

我怎样才能在CSS中执行此操作？我无法将自定义ID或类添加到UL或LI标记。

谢谢！

Answer 1

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

http://jsfiddle.net/e7hAF/

Answer 2

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

参见 JsFiddle

Answer 3

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

显示两级无序列表行

3 个答案: