html - 在一个文本的右边放一条线，然后在另一个文本的右边放一条线，这样下面的线就有相同的水平尺寸。 CSS

Question

我在用 CSS 做一些样式时遇到了问题。我需要制作这样的页面:

正文------------------------------------ $ 10

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

BiiiiiigeeerText------------------------$ 20

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

其他文本-------------------------------- $ 200

当然，该行不像示例，而是像 HTML 上的 HR 标记行。我尝试了很多样式，但没有找到真正适合我需要的样式。

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

图片示例:lines-example

谢谢，抱歉英语不好!

Answer 1

伪元素是理想的选择。

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

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