是否可以用CSS证明OL？ 文字对齐不起作用

Question

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

合理的

通过简单的“文本对齐：证明”； 到ol看起来像这样：

实际上没有道理！

谢谢，麻烦您了 ：）

Answer 1

我曾经用类似的答案在纯CSS中创建前导点。 这是一个CSS技巧，将圆点放在所有内容的后面，然后使用background: white;将其隐藏在文本后面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> 

Answer 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;
}

Answer 3

Flexbox版本：

 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>