以下布局可在 Chrome、Safari、IE 和 Opera 中正确呈现。在 Firefox 中，中断被忽略。
这是预期的结果:
我的偏好是进行 CSS 调整，使其在 FF 中正常工作(并使其在其他模式中正常工作)，但如有必要，我将采用另一种方法来实现相同的结果。
JSFiddle
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0
}
ul li {
clear: both;
}
ul li * {
float: left;
}
ul li div:first-child {
width: 100px;
}
</style>
</head>
<body>
<ul>
<li><div>One</div><div>A</div></li>
<li><div>Two</div><div>B</div></li>
<li><div>Three</div><div>C</div></li>
<li><div>Four</div><div>D - 1<br>D - 2<br>D - 3<br>D - 4</div></li>
</ul>
</body>
</html>
最佳答案
br { float:none !important; }
或者使用更具体的规则而不是 ul li * 来不将 float 应用于 br。
在 Nightly 21 和 Canary 26 上测试。float 似乎只影响 Firefox 中的 br 元素。
关于Firefox 中 <ul> 标签的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14267547/