开发者

How can I align this longer span with the rest?

I have this name/value pairs:

How can I align this longer span with the rest?

As you've already noticed, name and state's values are both of them aligned on right side but address' value starts on new row.

How can I align the span which contains the address like the rest values (yeah, it's longer, but it should start on the same row with Address and continue on the next one)?

Style of address:

<div class="prop">
   <span class="name">Address</span>
   <span class="value">Women and Gynae Oncology Centre Mount Elizabeth Medical Centre Mount Elizabeth #17-14</span>
</div>

CSS for name class:

.name {
  vertical-align: top;
  font-weight: bold;
  width: 115px;
  float: left;
  padding: 5px;
  margin-top: 3px;
  clear: left;
}

CSS for value class:

.value {
  float: left;
  padding: 5px;
}

Do you have any ideas?

开发者_StackOverflow社区Thanks.

UPDATE: After some refinements from the answer, it looks better:

How can I align this longer span with the rest?


.prop {background: #eff9fe; overflow: auto;}
.name {float: left; width: 300px;}
.value {display: block; overflow: hidden; background: #e5f2f5;}

putting the width on the .name will help your 'columns' align, overflow: hidden and no float on .value should mean that if long text in there needs to wrap it will only wrap inside itself instead of under the "key"

Updated per comments

added overflow:auto to container div as this needs to contain the floated child, float: left; width: 100%; should also work if overflow causes unnecessary scrollbars (it shouldn't in this case but you know..)

further update re alignment

.prop {overflow: auto; padding: 10px 0;}
.value {display: block; overflow: hidden; background: #e5f2f5;}

.name {
  font-weight: bold;
  width: 115px;
  float: left;
}


Here you go:

.prop {
    overflow:auto;
}

.value {
    float: right;
    width:350px;
}

Live demo: http://jsfiddle.net/simevidas/7L8kX/show/


It looks like you are having a wrapping issue. The span isn't the issue, its your div (or your screen) is to small to hold the span on one line, so its wrapping.

What are you settings for your prop css class?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜