Question

您好我希望显示我的有序列表：所以第一个节点和第一个嵌套节点出现在顶行，其余的嵌套节点出现在第二列（红色下）。

Apples    Red
          Green
          Yellow

Banana    Yellow

HTML：

<ul class="lst" id="list_Apple">
    <li>Apple</li> 
    <ul>
        <li id="Apple">Red</li>
        <li id="Apple">Green</li>
        <li id="Apple">Yellow</li>
    </ul>
</ul>

<ul class="lst" id="list_Banana">
    <li>Banana</li> 
    <ul>
        <li id="Banana">Yellow</li>
    </ul>
</ul>

Answer 1

你的html中有轻微的错误。 <ul>标记应位于<li>。

内

<强> HTML ：

<ul class="lst" id="list_Apple">
    <li>Apple</li> 
    <li>
        <ul>
            <li id="Apple">Red</li>
            <li id="Apple">Green</li>
            <li id="Apple">Yellow</li>
        </ul>
    </li>
</ul>

<ul class="lst" id="list_Banana">
    <li>Banana</li> 
    <li>
        <ul>
            <li id="Banana">Yellow</li>
        </ul>
    </li>
</ul>

并添加 CSS ：

.lst {
    clear: both;
}

.lst li {
    list-style: none;
}

.lst > li {
    float: left;
}

这是一个小提琴：http://jsfiddle.net/rayg8ua9/1/

Answer 2

lithanks ...是的，我错过了li标签。

.lst {
        clear: both;
        padding-top: 10px;
    }

.lst li {
        list-style: none;
        width:100px;
}

.lst > li {
        float: left;
}

使用css以表格样式创建嵌套的有序列表

2 个答案: