【问题标题】: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 的渲染。
    猜你喜欢
    • 2023-03-10
    • 2014-04-12
    • 1970-01-01
    • 2011-06-12
    • 2017-06-18
    • 2017-06-22
    • 1970-01-01
    • 2010-09-22
    • 2011-01-11
    相关资源
    最近更新 更多