2

複数のラベルと入力のペアを持つフォームの複数列レイアウトを実行しようとしています。Chrome と IE では正常に動作しますが、Firefox では動作しません。(問題のデモ)。の を削除しようとし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 に必要なルールはありますか?

4

1 に答える 1

3

これはbugzillaですでに報告されています。奇妙なことに、この要素を使用することはできませcolumn-countん<fieldset>。

<fieldset>を a<div>または他の要素に置き換えると、機能します

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

于 2013-04-28T17:51:55.500 に答える