跨度飘来坚持一个线，但要流到新线

我有一个使用浮动上显示的div交替侧键和值的列表。跨度飘来坚持一个线，但要流到新线

我遇到的问题是，当有一个很长的字符串作为重点，这是浮动的，而不是突破到多行，整条线向下移动到新的行。

这显示细腻，但如果有减肥手术后的多个值（例如，“减肥手术，举臂”），即全线下降到了下，然后中断下面的浮标的流动。正如在这个例子中：http://jsfiddle.net/3djakgf7/1/

我怎样才能让浮动开始在左边的按键对面的行上，然后在房间用完时下降到下一行，并按下列表项一条线呢？

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

来源

2015-05-29 Lee

像这样http://jsfiddle.net/j08691/3djakgf7/3/？ – j08691

这似乎不错，但此前，中漂浮的物品，被右对齐，在那里，因为这似乎取消了。 – Lee

@Lee还添加li：nth-child（2）{text-align：right}以保持右对齐，基于j08691 – AGE

请查看以下或更新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; 
}

来源

2015-05-29 13:41:44

我必须设置特定的宽度吗？我希望能够使用浮动，以保持响应。 – Lee

是的，你必须设置，因为你设置的UL标签 –

这对小提琴的目的，具体的宽度。 – Lee

下面是使用CSS表的替代方法解决方案。

它工作得相当好规定，第二列被对准到块的右边缘。

ul { 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    width: 238px; 
 
    overflow: auto; 
 
} 
 
ul li { 
 
    display: table-row; 
 
} 
 
ul li span { 
 
    border: 1px dotted blue; 
 
} 
 
.post-meta-key { 
 
    font-weight: bold; 
 
    display: table-cell; 
 
} 
 
.pull-right { 
 
    display: table-cell; 
 
    text-align: right; 
 
}

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

来源

2015-05-29 14:06:36

跨度飘来坚持一个线，但要流到新线

回答

相关问题