html - CSS：将文本元素交替为两个不同对齐的列的最简单方法，其间有项目符号？

Question

好的，这有点拗口，但我想做的是创建标准美国 FDA 营养成分框的“维生素和矿物质”部分

我正在使用 PHP 构建页面，所以我当然可以以编程方式执行此操作，但是是否有一种优雅的 CSS 方法来显示文本元素，以便每个其他元素都正确浮动，正确对齐？并且可以自动放置分隔两列的子弹吗？

我很想有这样的东西：

<ul id="vitaminssection">
  <li>Vitamin A 4%</li>
  <li>Vitamin C 2%</li>
  <li>Calcium 15%</li>
  <li>Iron 4%</li>
</ul>

...并将其格式化，如图所示。这是可行的吗？

Answer 1

想通了！:nth-field 是关键，特别是使用 :nth-field(odd) 和 :nth-field(even) 的能力。我在奇数元素上使用了一个伪元素将子弹放在中间（并在宽度上使用了 51%/49% 以或多或少地居中）。这适用于我在问题中包含的 HTML：

#vitaminssection {
  width: 350px;
  background-color: #FFF;
  list-style: none;
  padding: 0px;
}

#vitaminssection li {
  border-top: 1pt solid #000;
}

#vitaminssection li:nth-child(odd) {
  width: 51%;
  float: left;
}

#vitaminssection li:nth-child(odd):after {
  content:'\2022';
  text-align: right;
  float: right;
}

#vitaminssection li:nth-child(even) {
  text-align: right;
  float: right;
  width: 49%;
}

这是一个jsfiddle。