Html CSS：将文本元素替换为两个不同对齐的列（中间有项目符号）的最简单方法？

好吧，这是一口，但我想做的是创建美国食品和药物管理局标准营养资料框中的“维生素和矿物质”部分

我是用PHP构建页面的，所以我当然可以通过编程来实现，但是有没有一种优雅的CSS方法来显示文本元素，以便其他元素都是浮动的，对吗？分隔两列的项目符号可以自动放置吗

我想要这样的东西：

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

维生素A 4%
维生素C 2%
钙15%
铁4%

---

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

找到答案了！：第n个字段是关键，特别是使用：n个字段（奇数）和：n个字段（偶数）的能力。我在奇数块上使用了伪元素将子弹放在中间（在宽度上使用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%;
}