css - float 更长的文本意外行为

原文 标签 css

这是我整个非常简单的测试代码(也添加到 JsFiddle ):

<html>
<head></head>
<style>
    div {
        width: 100px;
        background: yellow;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background: green;
    }
    li {
        clear: both;
    }
    span {
        float: left;
        margin-right: 10px;
        color: red;
    }
    span + span {
        color: blue;
    }

</style>
<body>
<div>
    <ul>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text2 text2 text2 text2 text2 <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>
        <li>text <span>aaa</span> <span>bbb</span></li>

    </ul>
    test test

</div>
</body>
</html>

问题 - 在第二个 li 元素中有更多的文本和跨度没有 float 在第一行而是移动到第二行,老实说我不理解这种行为。我希望它们的行为与其他 li 元素中的行为相同,并且当它们简单地达到容器宽度时 text2 的某些部分移动到下一行

问题 - 如何修复它(最好的选择不将文本包装到任何标签中并且不将跨度移动到 li 元素的开头)以及为什么在这种情况下浏览器会以我不期望的方式这样做?

编辑 - 我添加了我想要实现的屏幕

当前行为是:

Current behaviour

期望的行为是:

Desired behaviour

最佳答案

发生这种情况是因为您的 div 上有固定的宽度。

如果增加 div 的宽度,文本将不会下降到下一行。

另外,因为它是一个浮点数,所以当它被放到下一行时,它会向左浮动,但是因为已经有元素,所以它被放置在行尾而不是形成自己的新行。

div {
        width: 150px;
        background: yellow;
    }

fiddle :http://jsfiddle.net/L95GR/3/

关于css - float 更长的文本意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24045481/

相关文章:

css - 使用javascript解决IE6中CSS问题的最佳方法是什么?

jquery - 如何在顶部和侧面标签正确滚动的情况下水平和垂直滚动html元素

javascript - 列表中的三个元素并排显示

html - 2列中的许多DIV容器,每行具有相同的灵活高度

jquery - 使用jQuery animate 增加DIV 的高度,而不会将内容向下推

javascript - 如何使 div 出现在整个网站?

javascript - 有没有办法在中途暂停 CSS 过渡?

javascript - 联系表格无法访问php脚本

css - 几个具有相同ID的HTML元素,是不是很错?

javascript - 如何为移动设备创建像 Accordion 一样工作的WordPress响应菜单?