Question

这是我的非常简单的测试代码（也添加到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元素中有更多的文本和跨度不会在第一行浮动并移动到第二行并且说实话我不理解这种行为。我希望它们的行为与其他li元素相同，当它们简单到达容器宽度时，text2的某些部分移动到下一行

问题 - 如何修复它（没有将文本包装到任何标签中并且没有移动跨越到li元素的开头的最佳选项）以及为什么这种情况下的浏览器以我不期望的方式执行此操作？

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

目前的行为是：

Current behaviour

期望的行为是：

Desired behaviour

Answer 1

这是因为你的div上有一个固定的宽度。

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

另外，因为它是一个浮点数，当它被放到下一行时它会向左浮动，但因为已经存在物品，所以它放在行的末尾而不是形成自己的新行。

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

小提琴：http://jsfiddle.net/L95GR/3/

Answer 2

到目前为止，我找到的唯一解决方案是使用定位而不是浮点数：

<html>
<head></head>
<style>
    div {
        width: 100px;
        background: yellow;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background: green;
    }
    li {
        clear: both;
        position: relative;
        padding-left: 55px;

    }
    span {

        margin-right: 10px;
        color: red;
        position: absolute;
        left: 0;
        top: 0;
    }

    span + span {
        color: blue;
        position: absolute;
        left: 25px;
    }

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

给出以下结果：

Achieved result

这不是我想要的但是它非常接近。如果有其他人有其他想法，请分享

浮动较长的文本意外行为

2 个答案:

小提琴：http://jsfiddle.net/L95GR/3/