0
159
VistasMantener elementos en la misma vertical
Quiero hacer íconos de moneda en la misma línea vertical.
Lo que quiero:
que tengo ahora:
.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 Respuestas
Responde la pregunta0
Simplemente genere el () usando ::before y ::after con una clase CSS para la tarea, y use la cuadrícula CSS para organizarlos:
.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
Denunciar
0
Puede agregar un espacio nbsp; al final de los números sin paréntesis y utilice una fuente monoespaciada. Por favor, intente esto.
.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
Denunciar
Responde la pregunta