【发布时间】：2011-08-10 05:14:29
【问题描述】：
我正在尝试使表单水平对齐，就像我使用表格一样：
<form>
<table>
<tr>
<td style="width:30%"><label for="field1">Field1 Title:</label></td>
<td><input type="text" id="field1" /></td>
</tr>
<tr>
<td>Are you sure?</td>
<td>
<label for="sure_yes"> Yes </label><input type="radio" id="sure_yes" />
<label for="sure_no"> No </label><input type="radio" id="sure_no" />
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Confirm" /></td>
</tr>
</table>
</form>
我可以将通用 css 定义为块显示，如下所示：
form label{
display:block;
float:left;
width:200px;
margin:5px 0;
clear:left;
}
form input, form textarea, form select{
display:block;
margin:5px 0;
clear:right;
float:left;
}
在这种情况下，我的 HTML 将如下所示：
<form>
<label for="field1">Field1 Title:</label>
<input type="text" id="field1" />
Are you sure?
<label for="sure_yes"> Yes </label><input type="radio" id="sure_yes" />
<label for="sure_no"> No </label><input type="radio" id="sure_no" />
<input type="submit" value="Confirm" />
</form>
当然，这个系统不适用于我显示收音机和提交的方式。我可以用 javascript 函数解决这个问题，但我想知道是否会有纯 css 解决方案 - 和跨浏览器。
【问题讨论】：
-
在使用 css 时，在大多数情况下（如 FORM、LABEL、TEXTAREA 等），您肯定希望远离 class HTML 元素。使用更细粒度的 CSS 选择器，这样您就不会对您不想设置样式的其他元素产生意外的副作用。
-
我不同意。当每个项目都不同时，你不能简单地通过这样的陈述。在编写表单时，99% 的时间我坚持使用标签选择器而不是类。它允许我定义整个网站所有元素的一致感觉，这应该遵循一致的设计。如果出于某种原因，有 5 或 6 种不同的表单样式，则将类或 id 添加到表单元素本身，从而允许您扩展该特定表单的基本样式。
-
@amustill - 让我们同意不同意。 :)
-
另外，你的建议是更接近 css 规范化的东西，如果你使用这种方法，你可能知道你在做什么，或者不知道你在做什么为了。不管怎样，祝你好运。