Firefox中表单的CSS多列布局

Question

看起来FireFox（我的版本是19.0.2 - OSX）无法使用多列布局正确呈现表单。它正确呈现正常段落文本等，但不是表单。

CSS：

fieldset {
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-count: 2;
}

这就是FireFox中的样子：

这就是WebKit浏览器中的样子：

请在FireFox中查看此sample code / live demo，看它是否为表单元素呈现多列布局。

这是一个错误，还是我可以做些什么来让它在FireFox中运行？

Answer 1

也许多列属性不能适用于您使用的特定标记元素（即fieldset）。 Fieldset专门用于对某些表单字段进行分组，但我不确定它是否已在多列中呈现... 所以我认为这是一个将来会纠正的错误......

您可以通过为第一个表单元素创建一个带有flot的简单div来解决这个问题...当然，使用此选项，您必须手动拆分将在左侧和右侧绘制的表单元素，你不再拥有等于长度的魔法了......

div#column1{
  width : 400px;
  float : left;
}
div#column2 {
 float : left;
}

<div id="#column1">Your first fields</div>
<div id="#column2">Your second fields</div>