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

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 ......是的，我错过了L1标签。

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

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

.lst > li { 
     float: left; 
}