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＆＃39; 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

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

此外，我想这样做，以使页面流畅和响应。我不想硬编码设定的像素数量。例如，我不想要保证金左：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%;
}

并在百分比中使用padding-left作为示例

我删除了前缀，但示例是前缀

UL LI 4列列表：每列的中心

1 个答案: