是否可以用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>