CSS问题与<；ul>；Firefox中的标签_Css_Html Lists

CSS问题与<；ul>；Firefox中的标签

css

CSS问题与<；ul>；Firefox中的标签,css,html-lists,Css,Html Lists,以下布局在Chrome、Safari、IE和Opera中正确呈现。在Firefox中，中断被忽略这是预期的结果：我的首选是CSS调整，它可以在FF中工作（并在其他版本中保持工作状态），但如果必要，我将采用另一种方法来实现相同的结果保险商实验室{ 列表样式类型：无；保证金：0；填充：0 } ulli{ 明确：两者皆有； } ul li*{ 浮动：左； } ulli分区：第一个孩子{ 宽度：100px； } 奥涅亚两个三C 四个D-1D-2D-3D-4 或者使用更具体的规则

以下布局在Chrome、Safari、IE和Opera中正确呈现。在Firefox中，中断被忽略

这是预期的结果：

我的首选是CSS调整，它可以在FF中工作（并在其他版本中保持工作状态），但如果必要，我将采用另一种方法来实现相同的结果


保险商实验室{
列表样式类型：无；
保证金：0；
填充：0
}
ulli{
明确：两者皆有；
}
ul li*{
浮动：左；
}
ulli分区：第一个孩子{
宽度：100px；
}

奥涅亚
两个
三C
四个D-1
D-2
D-3
D-4

或者使用更具体的规则而不是

ul li*

来不对

br

s应用浮点

在夜间21号和金丝雀26号进行测试

float

似乎只影响Firefox中的

br

元素。

没问题

=]

通常，人们希望

插入CSS样式的换行符。

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