css - UL LI 4 列列表 : Center in each column

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 列 (li's) 中的每一列都设置为 25% 的宽度，从而呈现列表如下(管道代表列，但不可见...)

| Top Level 1        | Top Level 2        | Top Level 3        | Top Level 4
| sub 1a             | sub 2a             | sub 3a             | sub 4a
| sub 1b             | sub 2b             | sub 3b             | sub 4b
| sub 1c             | sub 2c             | sub 3c             | sub 4c
| sub 1d             | sub 2d             | sub 3d             | sub 4d

我想做的，但似乎无法弄清楚，是这样的:

|     Top Level 1    |     Top Level 2    |     Top Level 3    |     Top Level 4
|     sub 1a         |     sub 2a         |     sub 3a         |     sub 4a
|     sub 1b         |     sub 2b         |     sub 3b         |     sub 4b
|     sub 1c         |     sub 2c         |     sub 3c         |     sub 4c
|     sub 1d         |     sub 2d         |     sub 3d         |     sub 4d

因此列保持不变，但列内的每个列表更位于列的中心，但不是居中对齐。

此外，我还想使页面流畅且响应迅速。我不想硬编码设定的像素数量。比如我不要 margin-left:50px;在所有元素上。

我希望这是有道理的。

Answer 1

http://codepen.io/luarmr/pen/eNEjLp

ul{
  margin:0;
  padding:0;
  list-style-type:none;
}

ul.wrapper{
  display:flex;
}

ul.wrapper>li{
          flex:1;
  padding-left:4%;
  border-left:2px dashed #333;
}

ul.wrapper>li ul li{
  padding-left:0%;
}

例如，在 percentaje 中使用 padding-left

我去掉了它的前缀，但是这个例子是带前缀的