html - 保持元素在同一垂直方向

Question

我想在同一条垂直线上制作货币图标。

我想要的:

我现在有什么:

.column {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 10px 0;
}

.cell {
  text-align: right;
}

<div class="column">
  <div class="cell">
    <div class="item">
      <span>123123 $</span>
    </div>
    <div class="item">
      <span>(123 $)</span>
    </div>
    <div class="items">
      <span>(1235 $)</span>
    </div>
    <div class="item">
      <span>12414 $</span>
    </div>
  </div>
</div>

Answer 1

只需使用 ::before 和 ::after 为任务生成一个 CSS 类的 ()，并使用 CSS grid 来安排他们:

.column {
  display: grid;
  grid-template-columns: max-content;
  padding: 10px 10px 10px 0;
  justify-items: end;
}

.cell {
  text-align: right;
}

.brackets {
  position: relative;
}

.brackets span::before,
.brackets span::after {
  position: absolute;
}

.brackets span::before {
  content: "(";
  left: -.35em;
}

.brackets span::after {
  content: ")";
  right: -.35em;
}

<div class="column">
  <div class="item">
    <span>123123 $</span>
  </div>
  <div class="item brackets">
    <span>123 $</span>
  </div>
  <div class="items brackets">
    <span>1235 $</span>
  </div>
  <div class="item">
    <span>12414 $</span>
  </div>
</div>