Texte d'alignement de texte sur la gauche vers la droite et le texte sur la droite vers la gauche

Question

Je sais que le titre semble compliqué, mais il est difficile à décrire - voici un fiddle.

Il y a deux versions de la même chose que j'aimerais accomplir, à savoir que les deux "colonnes" sont censées être alignées l'une sur l'autre, mais en même temps être alignées sur la bordure gauche du parent dans son ensemble. Le rouge (en bas) est la version la plus simple, qui fonctionne à moins que la fenêtre ne soit trop fine et que le texte ne se brise sur une autre ligne et que les deux lignes ne soient plus alignées. D'autre part, le bleu (en haut) résout le problème de rupture et fonctionne comme prévu, mais n'est pas aligné sur la gauche du parent (fenêtre d'affichage) comme il a besoin de width pour fonctionner.

Y at-il une solution pour intégrer le meilleur des deux mondes?

Merci.

Answer 1

En effet, à l'aide d'une table vous aidera à atteindre cet objectif. Mais comme vous l'avez mentionné, cela peut être un problème sémantique. Votre premier échantillon est assez intéressant, car il est tout à fait la même organisation qu'une table (<li> peut imiter <tr>, et <span> peut imiter <td>).

Cela signifie que vous pouvez obtenir le résultat souhaité en utilisant les propriétés d'affichage de table (ligne tables, table rangée, table-cell)

De toute évidence, le code CSS peut être

/* first */ 

ul { 
    list-style: none; 
    padding: 0; 
    display: inline-table; 
} 

li { 
    margin: 8px 0; 
    display: table-row; 
} 
span{display: table-cell;} 
span.amount { 
    padding-right: 16px; 
    text-align: right; 
    color: #999999 
} 

span.name { 
    width: calc(60% - 16px); 
} 

.first { 
    background-color: #dee4ec; 
} 

Le solution https://jsfiddle.net/piiantom/a09ezpgc/

Answer 2

Pourquoi ne pas utiliser un tableau HTML?

.cell-left { 
 
    text-align: right; 
 
    padding-right: 10px; 
 
} 
 

 
.cell-right { 
 
    text-align: left; 
 
    padding-left: 10px; 
 
}

<table> 
 
    <tr> 
 
    <td class="cell-left">2</td> 
 
    <td class="cell-right">lorem</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">100</td> 
 
    <td class="cell-right">mlipsum dolor sit</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">1</td> 
 
    <td class="cell-right">tbspamet consectetur adipiscing</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">100</td> 
 
    <td class="cell-right">gelit sed do eiusmod tempor incididunt</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">½</td> 
 
    <td class="cell-right">tsp tsput labore</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell-left">3</td> 
 
    <td class="cell-right">tbsp tbsp tbspet dolore magna aliqua</td> 
 
    </tr> 
 
</table>