1

我真的不擅长 CSS，我想知道如何正确地设置表单的样式，以便将每个文本输入和标签放在一行中。像这样 ：

<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>

它将显示在网页中，例如：

(label)(input)
(label)(input)
(label)(input)
(label)(input)
4

6 回答 6

4 
<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>​

<style>
input, label { float:left  }
label { clear:left; }
</style>

​</p>

http://jsfiddle.net/RpRS5/

于 2012-08-13T19:12:27.513 回答
2

我推荐A List Apart关于 Prettier Accessible Forms 的本教程。您还可以使用带有一些自定义样式的定义列表，例如，

<dl><dt><label></label></dt>
  <dd><input></dd></dl>

和类似的东西：

dl dt {
    float: left;
    width: 8em;
}

编辑：总结 A List Apart 文章，他们建议您将表单字段放在有序列表中ol。标签显示为inline-block水平显示在其关联字段旁边。

于 2012-08-13T19:26:43.340 回答
1

将您的输入放在标签元素中，然后您可以简单地display: block使用它们或浮动它们，我更喜欢显示，但它很容易更改。

<label>Hello <input type="radio" name="what" value="Hello" /></label>

http://jsfiddle.net/Bpxfp/

于 2012-08-13T19:15:16.040 回答
1

将它们放在一个列表中，或者放在一个类似列表的结构中（也就是说，将每个“行”包装在一个 div 中）。

于 2012-08-13T19:12:06.327 回答
0

http://jsfiddle.net/ud7YE/1/

您可以通过改变包装器的宽度来控制标签和输入之间的空间。只需将标签的高度和输入的上边距设置为相同的值但为负

于 2012-08-13T19:29:01.803 回答
0

我在 div 或列表中找到封闭标签并输入或选择标签。并且标签和选择标签应该是类型inline-block

<div>
    <label>Name: </label><input type="text" />
</div>

<div>
    <label>Place: </label><input type="text" />
</div>

CSS：

label {
    display: inline-block;
}
input {
    display: inline-block;
    padding: 2px;
}
div {
    display: block;
    margin: 2px 0;
}

这会很顺利。

于 2012-08-13T20:11:08.023 回答