Question

我想将输入和表单元素对齐到左边，并在左边标记信息，同时保持标签垂直居中，每个输入都对齐。我还需要在每个<li>标记之间留出一些空格。

您可以查看我在说什么并在这里询问...... http://jsfiddle.net/CCxwF/

Answer 1

请尝试使用此css：

label {display: block; margin: 5px 10px; float: left; width: 200px;}
input, select {float: left; width: 150px;}
ul li {clear: both;}
input.checkbox {width: inherit; margin: 5px 0 0 0;}

将未分类的标签结束标记更改为复选框输入之前，并将类checkbox添加到复选框

否则，如果您想在标签周围保留标签，可以使用此样式：

label {display: block; margin: 5px 10px; float: left; width: 200px; position: relative;}
input, select {float: left; width: 150px;}
ul li {clear: both;}
input.checkbox {width: inherit; margin: 5px 0 0 0;}

Answer 2

我完全删除了<ul>，在display: block上设置<label>就行了。

<强> Example

在此示例中，每个<label>都设置为block级别元素，并且每个<input>或<select>都设置为在其中浮动。黑色线条仅为清晰起见（只有这样才能看到标签是什么）。

Answer 3

我个人喜欢使用定义列表（虽然这不会垂直对齐您的<label>。

请参阅：http://jsfiddle.net/Wexcode/CCxwF/5/

您可能还需要考虑在表单中的元素中添加id属性，并执行label for="element-id"

如何正确对齐表单标签？

3 个答案: