Question

我正在尝试创建一个无序列表，该列表跨越多个始终居中的行，并且我可以设置哪个子节点分成第二行，例如 -

    link | link | link | link
link | link | link | link | link

（我将列表设置为清除第五个子元素的第二行）

要使内联显示解决方案使元素居中，我找不到清除它们的方法，所以我切换回基于浮动的列表。虽然这很容易处理清除，但我发现很难将多行居中 -

.container {
    width: 100%;
    overflow: hidden;
}
ul {
    list-style: none;
    position: relative;
    float: left;
    display: block;
    left: 50%;
}
li {
    position: relative;
    float: left;
    display: block;
    right: 50%;
}
li:nth-child(5) {
    clear: left;
}

使用此样式时，列表会在第二行生成后立即失去中心对齐想法？

使用内联方法和nth-child / after伪属性解决 - http://jsfiddle.net/2LULR/

Answer 1

要将多个浮动行居中，您必须手动将其居中。所以我认为最好的解决方案是使用display: inline并通过将父元素设置为text-align: center来居中。

要清除或创建一个新行，我会做这样的事情：

li:nth-child(5):after {
  content: "";
  display: block;
}

将每行具有特定金额的多个行列表项目居中

1 个答案: