forms - フォームの列と行を揃える方法

Question

私はフォームを持っていて、行に2つまたは3つの列を持たせたいのですが、そうするために私はやっています

.formcol {
     float: left;
      padding: 2px;
}

.formcol label {
     font-weight: bold;
     display:block;
}

このようなものを取得する方法

これがフィドルです

Answer 1

私があなたのhtml構造に以下の変更を加えたことを参照してください：

 <div class="formcol row">
                <div class="formcol form-left middle">
                    <input type="text" id="col1x" size="12" name="col1x" />
                    <label for="col1x" >col1x</label>
                </div>
                <div class="formcol form-right middle">
                    <input type="text" id="col2x" size="12" name="col2x" />
                    <label for="col2x">col2x</label>
                </div>
 </div>

そして私のクラスを1つ追加しました：

.middle > label
            {
                text-align: center;
                font-weight: bold;
                font-size: 15px;
                color: black;
            }

そしてそれは機能します：フィドル

3列の場合：構造を次のようにします。

<div class="formcol row">
                <div class="formcol form-left middle">
                    <input type="text" id="col1x" size="12" name="col1x" />
                    <label for="col1x" >col1x</label>
                </div>
                <div class="formcol form-left middle">
                    <input type="text" id="col1x" size="12" name="col1x" />
                    <label for="col1x" >col2x</label>
                </div>
                <div class="formcol form-right middle">
                    <input type="text" id="col2x" size="12" name="col2x" />
                    <label for="col2x">col3x</label>
                </div>
</div>

（既存のすべてのクラスに加えて、私の1つを使用します）

Answer 2

CSSとHTMLを使用して、2つまたは3つのdiv要素ブロックをフロートさせます。各divセクション内に、フォーム入力フィールドを配置します。次に、完了したらフロートをクリアすることを忘れないでください。

また、CSS内で、各入力フィールドの高さを全体で同じになるように制御します（つまり、

.my-input {
  height:20px;
}

そして、クラス名.my-inputを、ページにあるすべての入力フィールドに関連付けます。これにより、各フィールドの高さが等しいため、入力フィールドの行があることが視覚的にわかります。