Question

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

        <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：nd示例）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有几个解决方案，最简单的可能是将“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>

左右格式化CSS文本布局

2 个答案: