Question

我真的不擅长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)

Answer 1

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

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

http://jsfiddle.net/RpRS5/

Answer 2

我建议this tutorial by A List Apart关于更漂亮的无障碍表格。您还可以使用带有一些自定义样式的定义列表，例如，

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

等等：

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

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

Answer 3

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

Answer 4

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

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

http://jsfiddle.net/Bpxfp/

Answer 5

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

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

Answer 6

我在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;
}

这样做会很好。

如何正确设置表单样式？

6 个答案: