fieldset上的列计数对firefox不起作用 [英] column-count on fieldset doesn't work for firefox

问题描述

我试图对具有多对标签和输入的表单执行多列布局。它在Chrome和IE工作正常，但我不能让它与Firefox工作。 （问题演示）。我尝试删除标签上的 clear：left ，但这没有帮助。

I'm trying to do a multi-column layout for a form with multiple pairs of label and input. It works fine in Chrome and IE, but I can't get it to work with Firefox. (demo of the problem). I tried removing the clear: left on the label, but that doesn't help.

以下是简化的HTML：

Here's the simplified 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;
}

我还尝试使用列没有运气。有没有我没有添加的规则是Firefox需要的？

I also tried using columns and no luck. Is there rules that I didn't add that is required for Firefox?

推荐答案

这已经报告在bugzilla已经，奇怪，不能对< fieldset> 元素使用 column-count - 请查看： https://bugzilla.mozilla.org/show_bug.cgi?id=727164

This has been reported on bugzilla already, oddly you can't use column-count with the <fieldset> element - take a look at: https://bugzilla.mozilla.org/show_bug.cgi?id=727164

如果将< fieldset> 替换为< div> 或任何其他元素。

If you replace the <fieldset> with a <div> or any other element it will work

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

这篇关于fieldset上的列计数对firefox不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！