Formatieren von CSS-Textlayout links und rechts

Question

Ich verwende ionische Rahmen in meiner Anwendung, wo ich den linken Teil und rechten Teil Text wie folgt formatieren.

Plunkr: Plunkr file here

 <div class="list"> 
      <label class="item item-input"> 
      <span class="input-label">User id</span> 
      <span style="float:right;">00000001</span> 
      </label> 
      <label class="item item-input"> 
      <span class="input-label">Username</span> 
      <span style="float: right;">This username is really very very very long</span> 
      </label> 
     </div> 

Das ist mein Wunsch Ergebnis, wo das richtige Etikett rechts ausrichten und fallen nach unten wie folgt sein sollte, wenn es nicht passt. Wie man in der Plunkr sehen kann, stimmt das tatsächliche Ergebnis nicht richtig überein und das richtige Etikett wird überlaufen, wenn es zu lang ist. Wie kann ich den gewünschten Effekt erzielen?

User id      00000001 
Username  This username is really 
         very very long 
This left     Long Label 
label is 
too long 

Answer 1

Ich schlage vor, Sie den Schwimmer entfernen und verwenden display: table (oder flex, 2: nd Probe)

.list { 
 
    width: 300px; 
 
} 
 
.item { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.item > span { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.item > span:first-child { 
 
    text-align: left; 
 
} 
 
.item > span:last-child { 
 
    text-align: right; 
 
}

<div class="list"> 
 
    <label class="item item-input"> 
 
    <span class="input-label">User id</span> 
 
    <span style="float:right;">00000001</span> 
 
    </label> 
 
    <label class="item item-input"> 
 
    <span class="input-label">Username</span> 
 
    <span style="float: right;">This username is really very very very long</span> 
 
    </label> 
 
</div>

.list { 
 
    width: 300px; 
 
} 
 
.item { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.item > span { 
 
    flex: 1; 
 
} 
 
.item > span:first-child { 
 
    text-align: left; 
 
} 
 
.item > span:last-child { 
 
    text-align: right; 
 
}

<div class="list"> 
 
    <label class="item item-input"> 
 
    <span class="input-label">User id</span> 
 
    <span style="float:right;">00000001</span> 
 
    </label> 
 
    <label class="item item-input"> 
 
    <span class="input-label">Username</span> 
 
    <span style="float: right;">This username is really very very very long</span> 
 
    </label> 
 
</div>

Answer 2

Es gibt s Mehrere Lösungen dazu, die einfachste ist wahrscheinlich, "float: rechts" durch "margin-left: auto" zu ersetzen.

Aber das sieht so aus, als sollten diese Daten eher in eine Tabelle als in einige Spannen eingegeben werden?

<div class="list"> 
     <label class="item item-input"> 
     <span class="input-label">User id</span> 
     <span style="margin-left:auto;">00000001</span> 
     </label> 
     <label class="item item-input"> 
     <span class="input-label">Username</span> 
     <span style="margin-left:auto;">This username is really very very very long</span> 
     </label> 
    </div>