html - 不同行的李标签

Question

我有多个 li 元素，但我想遵循每行以下 li 的格式（居中对齐）：

3
4
3
3
3 etc...

我之前在 flexbox 中进行了设置，但无法弄清楚如何执行此操作。所以我使用了 display:inline-block。

.meet-team li {
  list-style-type: none;
  width: 20%;
  padding: 20px 15px;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
}

.meet-team li:nth-of-type(4),
.meet-team li:nth-of-type(9) {
  clear: left;
}

<ul class="meet-team">
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
</ul>

标签： htmlcss

Answer 1

您可以尝试使用 flexbox 并简单地flex-basis为第二行使用不同的（或宽度）：

ul {
 display:flex;
 flex-wrap:wrap;
 margin:0;
 padding:0;
}

.meet-team li {
  list-style-type: none;
  flex-basis: 33%;
  padding: 20px 15px;
  box-sizing: border-box;
  text-align:center;
}

.meet-team li:nth-of-type(4),
.meet-team li:nth-of-type(5),
.meet-team li:nth-of-type(6),
.meet-team li:nth-of-type(7) {
  flex-basis: 25%;
}

<ul class="meet-team">
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
</ul>