你怎么能用“对齐-内容:中间的空格”这样的内容来为内容辩护，而用表格代替呢？

Question

如何在不使用flexbox justify-content: space-between;和使用表的情况下对像这样的内容进行验证呢？

<table>
  <tr>
    <td>Apples</td>
    <td>Blueberries</td>
    <td>Bananas</td>
    <td>Strawberries</td>
  </tr>
</table>

我希望“苹果”被冲左，“草莓”被冲右，文本项目之间的间距相等。

使用偶数列宽度的text-align会使而不是产生偶数间距。

Answer 1

作为单个CSS属性应用的text-align: center无法工作，因为每个td都将width设置为auto。

您可以做的是将每个td的宽度除以td的数量：

td {
  width: calc(100% / NB_TD (in your case: 4);
  text-align: center;
}

td:first-child { // For 'Apple' aligned in the left
  text-align: left;
}

td:last-child { // For 'Strawberries' aligned in the right
  text-align: right
}