Style UL LI list sum 所有元素垂直对齐并向左对齐？

Question

我正在构建一个包含四列的页脚导航：

<ul>
    <li>Top Level 1
        <ul>
            <li>sub 1a</li>
            <li>sub 1b</li>
            <li>sub 1c</li>
            <li>sub 1d</li>
        </ul>
    </li>
    <li>Top Level 2
        <ul>
            <li>sub 2a</li>
            <li>sub 2b</li>
            <li>sub 2c</li>
            <li>sub 2d</li>
        </ul>
    </li>
    .... (repreat 2 more times)....
</ul>

我无法让顶级项目和子项目左对齐，因此它们都齐平并左对齐。我已经把它们分成 4 列了，但是它们看起来像这样：

Top Level 1        Top Level 2
    sub 1a            sub 2a
    sub 1b            sub 2b
    sub 1c            sub 2c
    sub 1d            sub 2d

如果需要的话，我可以post我现在的CSS。

Answer 1

尝试重置 padding-left

ul, li{list-style:none; padding-left:0}
div{-webkit-column-count: 2;column-count: 2;}

<div>

    <li>Top Level 1
        <ul>
            <li>sub 1a</li>
            <li>sub 1b</li>
            <li>sub 1c</li>
            <li>sub 1d</li>
        </ul>
    </li>
    <li>Top Level 2
        <ul>
            <li>sub 2a</li>
            <li>sub 2b</li>
            <li>sub 2c</li>
            <li>sub 2d</li>
        </ul>
    </li>

   
</div>

Answer 2

您可以使用 flex 来实现，您也可以使用 float，但我喜欢使用 flex，非常简单。要添加新列，您无需执行任何操作。

这里有一个完整的例子可以玩： http://codepen.io/luarmr/pen/waqxmY

重要的是： 1- 对第一个 ul 应用不同的样式，对其他的 li 应用不同的样式，因为我在第一个 ul 中添加了 class。在我可以使用子选择器后 ´>´

2.- Flex 需要在这种情况下添加一个带有 display: flex 的元素。内部元素可以用不同的方式分配，我们在这里不使用任何特殊的方式。这个元素也是第一个ul。

3.- 神奇之处在于，我在第一个 li 元素中添加了属性 flex。此上下文中的属性允许自动计算此元素中的宽度。如果你把'1'这个头脑放在一个单位，如果你把'2'这个头脑加倍...

ul.wrapper{
  display:flex;
}

ul.wrapper>li{
   flex:1;
}

添加前缀（浏览器兼容性）和一些修饰。

Style UL LI list sum 所有元素垂直对齐并向左对齐？

Style UL LI list so all elemetns are vertically aligned and flushed left?

css

navigation