0
155
ViewsKeep items on same vertical
I want to make currency icons on the same vertical line.
What I want:
What do I have now:
.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>
·
Santiago Trujillo
2 answers
Answer question0
Just generate the () using ::before and ::after with a CSS class for the task, and use CSS grid to arrange them:
.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>
·
Santiago Trujillo
Report
0
You can add a space nbsp; at the end of the numbers without parenthesis and use a monospace font. Kindly try this.
.column {
display: flex;
flex-direction: column;
padding: 10px 10px 10px 0;
font-family: Courier, monospace;
}
.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>
·
Santiago Trujillo
Report
Answer question