與縱向顯示

Question

嵌套列表水平列表，我想顯示如下：

<ul class="parent"> 
    <li>a 
     <ul class="child"> 
      <li>a1</li> 
      <li>a2</li> 
      <li>a3</li> 
     </ul> 
    </li> 
    <li>b 
     <ul class="child"> 
      <li>b1</li> 
      <li>b2</li> 
      <li>b3</li> 
     </ul> 
    </li> 
</ul> 

像這樣：

*a  *b 
    *a1  *b1 
    *a2  *b2 
    *a3  *b3 

我嘗試使用內聯和浮動的一些變化，但無法找到一種方法讓子菜單垂直擴展並使用CSS排列。

Answer 1

HTML（固定）

<ul class="parent"> 
    <li>a 
     <ul class="child"> 
      <li>a1</li> 
      <li>a2</li> 
      <li>a3</li> 
     </ul> 
    </li> 
    <li>b 
     <ul class="child"> 
      <li>b1</li> 
      <li>b2</li> 
      <li>b3</li> 
     </ul> 
    </li> 
</ul> 

CSS

.parent > li { 
    float: left; 
    width: 100px; 
} 

.child > li { 
    padding-left: 20px; /* not needed if you don't reset your css */ 
}