我想在同一条垂直线上制作货币图标。
我想要的:
我现在有什么:
.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>
最佳答案
只需使用 ::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>
关于html - 保持元素在同一垂直方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70934284/