css - 无论如何使用 css/scss 将这些标题名称与其列对齐？

Question

我的 css/scss 有点卡在这里。我希望这些标题列标题在相应列的中间对齐。这是 col header 的代码:

<li id="campaignHead">
  <label>Campaign Name</label>
  <label>Status</label>
  <label>Budget</label>
  <label>Start Date</label>
  <label>End Date</label>
</li>

这是对应的css/scss:

#campaignHead{
  background-color: $thColor;
  @include li();
  justify-content: flex-start;
  label{
    position: relative;
    left: 0%;
  }
}

我还在这里创建了一个 js fiddle :https://jsfiddle.net/hpufo/8xyo12Lg/1/

Answer 1

我在这里的主要建议是使用表格，因为这是表格的明确用例。

但是，如果您必须使用带标签的列表，则需要为标签指定固定宽度。

有点像

#campaignHead label {
    width:20%;
}

应该可以解决您的问题。如果您希望内容正确对齐，您还需要将输入设置为具有相同的宽度

您也可以使用网格布局来实现类似的效果