html – 如何用CSS包装线内嵌线？

发布时间：2020-12-14 21:34:13 所属栏目：资源来源：网络整理

导读：我有一个简单的HTML结构( jsfiddle)： li div class="buttons" a href="done"img src="done.png"/a /div div class="owners" Даня Абрамов и Саша Васильев /div div class="text" трали-вали трали-вали тра

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

<li>
    <div class="buttons">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners">
        Даня Абрамов и Саша Васильев
    </div>
    <div class="text">
        трали-вали трали-вали трали-вали трали-вали
    </div>
</li>

按钮，所有者和文字都有显示：inline-block。

当文字相当小时，这看起来很好：

然而，随着文本的增长，内嵌块元素的扩展并最终落在了一行：

这是丑的，我想避免。
我想要实现的是这样的：

当文本太大而不能放在元素内部时，我希望它被行包装。
我试过设置float：留在元素上，但无法使其工作。

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

解决方法

如果您使用浮点而不是显示：inline-block，则可以实现所需的确切结果。

见：http://jsfiddle.net/thirtydot/CatuS/

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!