Question

我的css / scss有点卡住了。我希望这些标题列标题在其对应列的中间对齐。以下是col标头的代码：

<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小提琴：https://jsfiddle.net/hpufo/8xyo12Lg/1/

Answer 1

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

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

像

这样的东西

authors <- data.frame(
surname = I(c("Tukey", "Venables", "Tierney", "Ripley", "McNeil")),
nationality = c("US", "Australia", "US", "UK", "Australia"),
deceased = c("yes", rep("no", 4)))

books <- data.frame(
name = I(c("tukey", "venables", "tierney",
           "tipley", "ripley", "McNeil", "R Core")),
title = c("Exploratory Data Analysis",
          "Modern Applied Statistics ...",
          "LISP-STAT",
          "Spatial Statistics", "Stochastic Simulation",
          "Interactive Data Analysis",
          "An Introduction to R"),
other.author = c(NA, "Ripley", NA, NA, NA, NA,
                 "Venables & Smith"))
m1 <- merge(authors, books, by.x = "surname", by.y = "name")

应该解决你的问题。如果您想要正确对齐，您还需要将输入设置为具有相同的宽度

你也可以使用网格布局来实现类似的东西

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

1 个答案: