使用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; 
}