是否有可能在 CSS 中证明 OL 的合理性？文本对齐不起作用答案

【问题标题】：Is it possible to justify OLs in CSS? Text-align is not working是否有可能在 CSS 中证明 OL 的合理性？文本对齐不起作用
【发布时间】：2016-03-21 14:14:33
【问题描述】：

如何对齐 ol 使其看起来像这样：

Justified

通过简单的“文本对齐：对齐；”对 ol 来说是这样的：

Not justified actually!

谢谢你:)

【问题讨论】：

坦率地说，我会用一张桌子。
请在 fiddle/codepen 中分享一些标记和 css

标签： html css html-lists justify

【解决方案1】：

a similar answer 是我用来在纯 CSS 中创建前导点的。这是一个 CSS 技巧，将点放在所有内容后面，然后使用 background: white; 覆盖文本后面的点。如果背景是纯色，那么这可以工作。

ol {
  list-style: none;
  max-width: 20em;
  overflow-x: hidden;
  padding: 0;
}

ol li:before {
  content: "...................................................";
  float: left;
  letter-spacing: 0.25em;
  white-space: nowrap;
  width: 0;
}

ol span:first-child {
  background: white;
  padding-right: 0.33em;
}

ol span + span {
  background: white;
  float: right;
  padding-left: 0.33em;
}

<ol>
 <li>
   <span>United States</span>
   <span>86%</span>
 </li>
 <li>
   <span>Canada</span>
   <span>5%</span>
 </li>
 <li>
   <span>UK</span>
   <span>4%</span>
 </li>
 <li>
   <span>Australia</span>
   <span>3%</span>
 </li>
 <li>
   <span>Germany</span>
   <span>2%</span>
 </li>
</ol>

【讨论】：

【解决方案2】：

正如 Paulie_D 提到的，您可能需要考虑使用这样的简单表格：

<table>
  <tbody>
    <tr>
      <td>[Flag]</td>
      <td>[Name]</td>
      <td class="text-right">[Percentage]</td>
    </tr>
  </tbody>
</table>

并且您应该确保您的表格宽度设置为 CSS 文件中容器的 100%：

table {
  width: 100%;
}

.text-right {
  text-align: right;
}

【讨论】：

【解决方案3】：

弹性盒版本：

ul {
  list-style-type: none;
  margin: 0 auto;
  width: 80%;
  padding: 0;
}
.list {
  display: flex;
}
.first {
  margin-right: 0.5em;
  color: #2B91AF;
  flex: 1;
  display: flex;
}
.price {
  text-align: right;
  flex: 0 0 4em;
}
.first:after {
  content: '';
  border-bottom: dotted 2px tomato;
  flex: 1;
}

<ul>

  <li class="list">
    <i class='first'>Co-Pay:</i>
    <i class="price">$150.00</i>
  </li>
  <li class="list">
    <i class='first'>Pay:</i>
    <i class="price"> $5.00</i>
  </li>
  <li class="list">
    <i class='first'>Co-Pay: item</i>
    <i class="price"> $15.00</i>
  </li>
  <li class="list">
    <i class='first'>Co-Pay: great deal</i>
    <i class="price"> $1.00</i>
  </li>
</ul>

【讨论】：