3

次のレイアウトは、Chrome、Safari、IE、および Opera で適切にレンダリングされます。Firefox では、ブレークは無視されます。

これは期待される結果です:

期待される結果

私の好みは、FF で動作するようにする (そして他のものでも動作し続ける) CSS の微調整ですが、必要に応じて、同じ結果を得るために別のアプローチを採用します。

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; }

フィドル

または、float をsul li *に適用しない代わりに、より具体的なルールを使用します。br

Nightly 21 と Canary 26 でテストされています。それでも、Firefox の要素にのみfloat影響を与えるようです。br

于 2013-01-10T21:31:36.233 に答える