如何用CSS包装内联块中的行？

Question

我有一个简单的HTML结构(jsfiddle):

<li>
    <div class="buttons">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners">
        ???? ??????? ? ???? ????????
    </div>
    <div class="text">
        ?????-???? ?????-???? ?????-???? ?????-????
    </div>
</li>

buttons,owners并text有display: inline-block.

当text相当小时,这看起来很好:

但是,随着文本的增长,inline-block元素会延伸并最终落在该行上:

这很难看,我想避免这种情况.
我想要实现的是:

当文本太大而无法放入元素内部时,我希望它被行包裹.
我尝试设置float: left元素,但无法使它工作.

使用HTML和CSS(没有表格)执行此操作的正确方法是什么？

Answer 1

如果您使用浮动而不是使用浮点数,则可以获得您想要的确切结果display: inline-block.

请参阅: http ://jsfiddle.net/thirtydot/CatuS/

li {
    overflow: hidden;
}
.buttons, .owners {
    float: left;
}
.text {
    overflow: hidden;
    padding-left: 4px;
}