html - 左右格式化CSS文本布局

Question

我在我的应用程序中使用了 ionic 框架，我在其中将左侧部分和右侧部分文本格式化如下。

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

我建议您删除 float 并使用 display: table(或 flex，第二个示例)

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