CODEWITHSUNDEEP
htmlcssionic-framework
desmondlee
desmondlee

Reputation: 1703

Formatting CSS text layout left and right

I am using ionic framework in my application, where i format the left part and right part text as follow.

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>

This is my desire result, where the right label should be right align and drop down as follow if it does not fit. As what can be see in the plunkr, the actual result do not right align and the right label will overflow if too long. How can i achieve desire effect as follow?

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

Upvotes: 0

Views: 100

Answers (2)

Asons
Asons

Reputation: 87191

I suggest you remove the float and use display: table (or flex, 2:nd sample)

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

Upvotes: 1

Pingumask
Pingumask

Reputation: 11

There's several solutions to this, the simplest is probably to replace "float:right" with "margin-left:auto".

But, this looks like those data should be put in a table rather than in some spans ?

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

Upvotes: 0

Related Questions