css - 带有垂直显示的嵌套列表的水平列表

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

我尝试了一些使用内联和 float 的变体，但找不到使用 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 */
}