0

我有一个表格,并且希望一行有 2 或 3 列,这样做我正在做

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

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

如何得到这样的东西

X

这是小提琴

4

2 回答 2

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>

(它使用你所有现有的课程,加上我的一个)

于 2013-03-09T19:13:39.920 回答
0

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

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

.my-input {
  height:20px;
}

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

于 2013-03-09T19:00:37.027 回答