居中列表，但每行分解为 3 个项目

Question

我有一个项目列表，每个项目都包含各种长度的单词。此列表以页面为中心。为了控制它的自动换行方式，我想让它在每四个项目之后添加一个换行符。

例如，当前包含 8 个项目的列表可能会显示如下：

1 | 2 | 3 | 4 | 5 | 6
7 | 8

显然，它包裹的位置取决于每个项目的宽度，不能是固定宽度。我希望它显示如下：

1 | 2 | 3 | 4
5 | 6 | 7 | 8

目前scss是：

li {
    list-style: none;
    float: left;
    display: inline;
    border-right: 2px $cuco-pink solid;
    margin-bottom: 10px;
    padding: 0 15px;
}
li:nth-child(4) {
    border-right: 0px $cuco-pink solid;
}
li:last-child {
    border-right: 0px $cuco-pink solid;
}
li:nth-child(4n+5) {
    clear: both;
}

在玩了一下午之后，如果我使用 float:left 和 display:inline，我可以在每 4 个项目后换行，但无法使其居中

或者我可以通过使用 float: none 和 display:inline-block 来使其居中，但然后无法正确包装。

请参阅jsfiddle，一旦修复，我将通过更改第 n 个子设置使其响应。

Answer 1

将它包裹在一个DIV中，然后你可以将div居中：IE：

#ul-container {
 width: 300px;
 margin: 0 auto;
}

div 被赋予了 ul-container 的 id

Answer 2

尝试使用 display:flex;为此目的的财产。并给 li 25% 的宽度（4 个项目为 20%）；

ul { 
width: 100%;
display: flex;
flex-wrap: wrap;
}

这里是更新的小提琴；希望它会有所帮助。 https://jsfiddle.net/cvk15qj5/2/