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

Question

我有这个名称/值对：

正如您已经注意到的那样，名称和状态值都在右侧对齐，但地址'值从新行开始。

如何将包含地址的跨度与其余值对齐 （是的，它更长，但它应该与地址相同的行开始并继续下一个）？

地址风格：

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

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

值类的CSS：

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

你有什么想法？

谢谢。

更新：从答案中进行一些改进后，它看起来更好：

Answer 1

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

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

每条评论更新

添加overflow:auto到容器div，因为它需要包含浮动子， float: left; width: 100%; float: left; width: 100%; 如果溢出导致不必要的滚动条也应该工作（在这种情况下不应该但你知道..）

进一步更新重新对齐

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

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

Answer 2

干得好：

.prop {
    overflow:auto;
}

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

现场演示： http ： //jsfiddle.net/simevidas/7L8kX/show/

Answer 3

看起来你有一个包装问题。 跨度不是问题，它的div（或你的屏幕）很小，可以将跨度保持在一条线上，所以它的包装。

您的prop css课程的设置是什么？