使物品保持在同一垂直方向

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

只需为该任务生成()using::before和with 一个 CSS 类，然后使用 CSS 网格来排列它们：::after

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