我有一个表格,并且希望一行有 2 或 3 列,这样做我正在做
.formcol {
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;
}
如何得到这样的东西
这是小提琴
请参阅我对您的 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>
(它使用你所有现有的课程,加上我的一个)
使用 CSS 和 HTML 浮动 2 或 3 个 div 元素块。在每个 div 部分中放置您的表单输入字段。然后只需记住在完成后清除浮动。
同样在您的 CSS 中,将每个输入字段的高度控制为相同(即
.my-input {
height:20px;
}
并将类名 .my-input 关联到页面上的每个输入字段。由于每个字段的高度相等,这应该在视觉上给您一种输入字段行的感觉。