Firefox 中表单的 CSS 多列布局

【问题标题】：CSS multi-column layout of forms in FirefoxFirefox 中表单的 CSS 多列布局
【发布时间】：2013-03-21 12:45:10
【问题描述】：

看起来 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 中也能正常工作？

【问题讨论】：

标签： forms css firefox webkit multiple-columns

【解决方案1】：

也许多列属性暂时不适用于您使用的这个特定标记元素（即字段集）。 Fieldset 专用于对一些表单字段进行分组，但我不确定它是否已经实现以在多列中呈现... 所以我应该认为这是一个错误，以后会更正......

您可以通过为第一个表单元素创建一个带有 flot left 的简单 div 来解决这个问题...当然，使用此选项，您必须手动拆分将在左侧和右侧绘制的表单元素，你不再有 equals length mutli-colmun 的魔力了……

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

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

【讨论】：

感谢您指出这个选项 Stéphane - 不幸的是，无法更改标记。我想我们可能只需要忍受 Firefox 的渲染。