在文本的右侧放置一行，然后在另一个文本上放置一行，以便下面的行具有相同的水平大小。 CSS

Question

我遇到了用CSS做一些风格的问题。 我需要制作一个这样的页面：

文字-------------------------------------- $ 10

BiggerText ------------------------------ $ 20

BiiiiigeeerText -------------------------- $ 20

A ------------------------------------------ $ 10

OtherText ------------------------------ $ 200

当然，该行并不像示例，但与HTML上的HR标记行一样。 我尝试了很多款式，但我没有找到一款真正有效的款式。

有人知道我如何制作一些CSS样式，允许我将左文本，行，然后其他文本放在同一行？

图片示例：lines-example

谢谢，抱歉英文不好！

Answer 1

伪元素是理想的选择。

＆＃13;

＆＃13;

.pricelist {
  margin: auto;
  width: 80%;
  border: 1px solid black;
  padding: 1em;
}
.list {
  min-width: 15em;
}
.first {
  float: left;
  margin-right: 0.5em;
  color: #2B91AF
}
.price {
  float: right;
  margin-left: 0.5em;
  text-align: right;
  min-width:3em;
}
.list:after {
  content: '';
  border-bottom: solid 1px tomato;
  display: block;
  overflow: hidden;
  height: 0.8em;
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;