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

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%;也应该有效（在这种情况下它不应该但你知道..）

进一步更新重新对齐

.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课程的设置是什么？