Html 显示两级无序列表行_Html_Css_Html Lists

Html 显示两级无序列表行

html css

Html 显示两级无序列表行,html,css,html-lists,Html,Css,Html Lists,我想使用两级无序列表来创建内联选项行这是我的密码： <ul> <li>CHOICE ONE <ul class="children"> <li>option a</li> <li>option b</li> <li>option c</li> </ul> &

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

这是我的密码：

<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


选择三

我希望它显示如下：

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

如何在CSS中实现这一点？我无法向UL或LI标记添加自定义ID或类

谢谢大家!

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

参见


ul li{显示：块；}
ul li ul li{显示：内联；}
.children{display:inline；padding left:0px；}

选择一

方案a
方案b
备选案文c


选择二

方案d
选项e


选择三

如果您无法添加ID或类，则您制作的CSS可能会覆盖页面上的所有列表。包装元素上至少需要一个自定义类名或ID。我在这个块周围有一个自定义的类名或ID。我曾尝试在li元素和ul.children上使用display:inline，但最终我要么将所有内容都放在一个长行中，要么将第二级列表项内联显示。谢谢！这正是我所希望的。这也行。谢谢，@andi！！

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

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