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

如果需要，我可以发布我现在拥有的CSS。

Answer 1

尝试重置padding-left

<img>

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

Answer 2

你可以使用flex来做到这一点，你也可以使用float，但我喜欢使用flex，非常容易。要添加新列，您无需执行任何操作。

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

重要的是： 1-对第一个ul和li应用不同的样式，因为我在第一个ul中添加了一个类。我可以使用子选择器'＆gt;'

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

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

ul.wrapper{
  display:flex;
}

ul.wrapper>li{
   flex:1;
}

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

样式UL LI列表所以所有elemet都垂直对齐并向左冲洗？

2 个答案: