Question

我想知道我是不是从错误的角度来解决这个问题。

我正在尝试使项目等距分布，每行固定（5 /）的数字。前导列或最后一列不应有左边界或右边界。而且装订线或缝隙应该灵活/反应灵敏。

html

<ul>
  <li><span>01</span></li>
  <li><span>02</span></li>
  <li><span>03</span></li>
  <li><span>04</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
  <li><span>09</span></li>
  <li><span>10</span></li>
  <li><span>05</span></li>
  <li><span>06</span></li>
  <li><span>07</span></li>
  <li><span>08</span></li>
  <li><span>09</span></li>
</ul>

css

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1fr;
}

li {
  line-height: 3em;
  text-align:center;
 }

li:nth-child(5n+1) {
  text-align:left;
}
li:nth-child(5n) {
  text-align:right;
}

span {
  border: 1px solid fuchsia;
  border-radius: 50%;
  padding: 0.5em; 
}

/* Resets & Styling */
ul {
  background-color: lightblue;
  list-style: none;
  margin: 0;
  padding: 0;
}

我还创建了一个Codepen

Answer 1

这看起来如何？ https://codepen.io/panchroma/pen/LBMjoe

更新：已为IE11支持添加了供应商前缀

重要的一点是我更改了网格

ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr auto 1fr auto;
   grid-template-columns: auto 1fr auto 1fr auto;
}

然后将所有列表项的对齐方式设置为居中

li {
  line-height: 3em;
  text-align:center;
 }

作为一个小细节，我还在重置块末尾的重置中添加了正文。

希望这会有所帮助！

尝试使用Grid或Flexbox获得间隙间隔相等的相等列

1 个答案: