简体   繁体   English

如何将这个较长的跨度与其余的对齐?

[英]How can I align this longer span with the rest?

I have this name/value pairs: 我有这个名称/值对:

在此输入图像描述

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: 名称类的CSS:

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

CSS for value class: 值类的CSS:

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

Do you have any ideas? 你有什么想法?

Thanks. 谢谢。

UPDATE: After some refinements from the answer, it looks better: 更新:从答案中进行一些改进后,它看起来更好:

在此输入图像描述

.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" 将宽度放在.name上将有助于你的'列'对齐, overflow: hidden并且.value上没有浮动应该意味着如果需要包装它的长文本将只包裹在自身内部而不是在“密钥”下

Updated per comments 每条评论更新

added overflow:auto to container div as this needs to contain the floated child, float: left; width: 100%; 添加overflow:auto到容器div,因为它需要包含浮动子, float: left; width: 100%; 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/ 现场演示: 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. 跨度不是问题,它的div(或你的屏幕)很小,可以将跨度保持在一条线上,所以它的包装。

What are you settings for your prop css class? 您的prop css课程的设置是什么?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM