Question

我正在尝试为具有多对标签和输入的表单执行多列布局。它在Chrome和IE中运行良好，但我无法使用Firefox。（demo of the problem）。我尝试删除clear: left上的label，但这没有帮助。

这是简化的HTML：

<fieldset>
    <label>Label 1</label>
    <input type="number" value="0" />
    <label>Label 2</label>
    <input type="number" value="0" />
    ...
</fieldset>

这是CSS：

fieldset {
    height: 110px;      
    border: none;

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

label {
    float: left;
    clear: left;
    width: 125px;
    text-align: right;
    padding: 3px 0 3px 0;
    margin: 2px 0 2px 0;
}

input {
    float: left;
    width: 50px;
    height: 20px;
    margin: 3px 0 3px 10px;
}

我也尝试使用columns但没有运气。是否有我没有添加的规则是Firefox所必需的？

Answer 1

已经在bugzilla上报告了这一点，奇怪的是你不能将column-count与<fieldset>元素一起使用 - 请看一下：https://bugzilla.mozilla.org/show_bug.cgi?id=727164

如果您将<fieldset>替换为<div>或任何其他元素，它将起作用

http://jsfiddle.net/6CmJb/5/

fieldset上的列数不适用于firefox

1 个答案: