我有一个简单的HTML结构(
jsfiddle):
<li> <div class="buttons"> <a href="done"><img src="done.png"></a> </div> <div class="owners"> Даня Абрамов и Саша Васильев </div> <div class="text"> трали-вали трали-вали трали-вали трали-вали </div> </li>
当文字相当小时,这看起来很好:
然而,随着文本的增长,内嵌块元素的扩展并最终落在了一行:
这是丑的,我想避免。
我想要实现的是这样的:
当文本太大而不能放在元素内部时,我希望它被行包装。
我试过设置float:留在元素上,但无法使其工作。
使用HTML和CSS(没有表)执行此操作的正确方法是什么?
解决方法
如果您使用浮点而不是显示:inline-block,则可以实现所需的确切结果。
见:http://jsfiddle.net/thirtydot/CatuS/
li { overflow: hidden; } .buttons,.owners { float: left; } .text { overflow: hidden; padding-left: 4px; }