Question

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

简单地说“text-align：justify;”它看起来像这样：

请，谢谢你：）

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

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版本：

＆＃13;

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

＆＃13;

<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>

＆＃13;

是否可以在CSS中证明OL的合理性？文本对齐无效

3 个答案: