CSS问题Firefox中的<ul>标记</ul>

时间:2013-01-10 21:26:09

标签: css html-lists

以下布局可在Chrome,Safari,IE和&歌剧。在Firefox中,会忽略中断。

这是预期的结果:

Expected Result

我的偏好是一个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>

1 个答案:

答案 0 :(得分:3)

br { float:none !important; }

Fiddle

或者使用更具体的规则而不是ul li *来不将浮动应用于br

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