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 */
}

Answer 2

由于我尽可能避免使用float而没有clear，我尝试了以下CSS（相同的HTML，Fiddle here）：

＆＃13;

.parent > li {
    display: inline-block;
    margin-right: 30px;
}

.parent > li:before {
    font-size: 20px;
    content: '\00a0\2022\00a0\00a0';
}

＆＃13;

<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>

＆＃13;

具有垂直显示的嵌套列表的水平列表

2 个答案: