这是我整个非常简单的测试代码(也添加到 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 元素的开头)以及为什么在这种情况下浏览器会以我不期望的方式这样做？
编辑 - 我添加了我想要实现的屏幕
当前行为是:
期望的行为是:
最佳答案
发生这种情况是因为您的 div 上有固定的宽度。
如果增加 div 的宽度，文本将不会下降到下一行。
另外，因为它是一个浮点数，所以当它被放到下一行时，它会向左浮动，但是因为已经有元素，所以它被放置在行尾而不是形成自己的新行。
div {
width: 150px;
background: yellow;
}
fiddle :http://jsfiddle.net/L95GR/3/
关于css - float 更长的文本意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24045481/