Question

我有一个表单，并希望一行有2或3列，这样做我正在做

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

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

如何获得这样的东西

这里是the fiddle

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>

并增加了一个额外的我的类：

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

并且有效：fiddle

对于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>

（它使用你现有的所有课程，加上我的一个课程）

Answer 2

使用CSS和HTML来浮动2或3个div元素块。在每个div部分中放置表单输入字段。然后，只需记住在完成后清除浮子。

同样在你的CSS中，控制每个输入字段的高度都是相同的（即

.my-input {
  height:20px;
}

并将类名.my-input与页面上的每个输入字段相关联。这应该在视觉上让您感觉到由于每个字段的高度相等而存在输入字段行。

如何在表单中对齐列和行

2 个答案: