html - float 跨度坚持一行，但想流到新行

Question

我有一个列表，它使用 float 在 div 的替代侧显示键和值。

我遇到的问题是，当有一个长字符串作为键时，它是 float 的，而不是分成多行，整行向下移动到一个新行。

这是一个例子:http://jsfiddle.net/3djakgf7/

这显示正常，但如果减肥手术后有多个值(例如，“减肥手术， ARM 提拉”)，整行会下降到下一个，然后中断下面的 float 流。如本例所示:http://jsfiddle.net/3djakgf7/1/

我怎样才能使 float 从左键对面的行开始，然后在空间用完时下降到下一行，并将以下列表项向下推到一行？

<ul class="post-meta">
    <li>
        <span class="post-meta-key">Procedure</span>
        <span class="pull-right">Weight Loss Surgery, Arm Lift</span>
    </li>
    <li>
        <span class="post-meta-key">Age</span>
        <span class="pull-right">44</span>
    </li>
    <li>
        <span class="post-meta-key">Location</span>
        <span class="pull-right">Surrey</span>
    </li>
</ul>

Answer 1

请在下面或更新后检查您的解决方案 fiddle

ul {
    width: 236px;
    padding-left: 0;
    margin-bottom: 0;
}
ul li {
    list-style-type: none;
    width: 100%;
    float: left;
}
.post-meta-key {
    font-weight: bold;
    float: left;
    width: 76px;
}
.pull-right {
    float: right;
    width: 160px;
}