3

以下布局在 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>
4

1 回答 1

3 
br { float:none !important; }

小提琴

或者使用更具体的规则而不是ul li *不将 float 应用于brs。

在 Nightly 21 和 Canary 26 上进行了测试。float似乎br只影响 Firefox 中的元素。

于 2013-01-10T21:31:36.233 回答