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>

并增加了一门我的额外课程：

.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>

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

Answer 2

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

同样在您的 CSS 中，将每个输入字段的高度控制为相同（即

.my-input {
  height:20px;
}

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