CSSのテキストレイアウトを左右にフォーマットする

Question

私のアプリケーションでは、左の部分と右の部分のテキストを次のように書式設定するイオンフレームワークを使用しています。

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> 

これは、右のラベルは右に整列すること、それが収まらない場合は従うようドロップダウンする必要があり、私の願望の結果、です。 plunkrで見ることができるように、実際の結果は正しく整列せず、長すぎると正しいラベルがあふれます。私は次のようにどのように欲望効果を達成することができますか？

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

Answer 1

私はあなたがフロートを削除し、display: table使用することをお勧め（またはflexを、2：番目のサンプル）

.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

sがありますこれにはいくつかの解決法がありますが、最も単純なのはおそらく "float：right"を "margin-left：auto"に置き換えることでしょう。

しかし、これらのデータは、いくつかのスパンではなくテーブルに配置する必要がありますか？

<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>