正确对齐控件答案

【问题标题】：Align controls properly正确对齐控件
【发布时间】：2011-01-26 00:16:11
【问题描述】：

我想在我正在处理的网站上调整相同控件的外观，但似乎不太顺利。我想使用 CSS 正确对齐控件。我想让复选框和标签左对齐，然后有一点空间，然后文本框就来了。此外，我希望所有文本框都垂直对齐。如何在不使用表格的情况下使用 css 做到这一点。

提前感谢您的帮助，Laziale

【问题讨论】：

【解决方案1】：

CSS

div{margin-bottom:2px;}
input[type="checkbox"]{display:block; float:left; margin-right:2px;}
label{display:block; float:left; width:150px;}

HTML

<div><input type="checkbox" /><label>Address</label><input type="text" /></div>
<div><input type="checkbox" /><label>State</label><input type="text" /></div>
<div><input type="checkbox" /><label>City</label><input type="text" /></div>
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>

【讨论】：

【解决方案2】：

说真的，如果您需要，您应该使用表格。无论如何，您将有更多的 html 和 CSS 来尝试实现这一目标。

在 Html 中不使用表格的整个驱动力是用于页面布局以及您可能希望仅使用 CSS 重新排列页面布局（四处移动）的地方。但我怀疑您是否想重新安排表单的布局方式。

【讨论】：

【解决方案3】：

最简单的方法：为输入容器（标签）指定宽度和float:left http://jsfiddle.net/tCcff/2/

<style type="text/css">
label {
    float: left;    
    width: 8em;    
}

label.text {
  width: 7em;
}
</style>
<div>   
    <label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' />
</div>
<div>   
    <label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' />
</div>
<div>   
  <label> <input type='checkbox' /> Label here </label> <label  class='text'>Text Three-----</label> <input type='text' />
</div>

这篇文章是基于 CSS 的表单布局的一个很好的参考：http://articles.sitepoint.com/article/fancy-form-design-css/3

【讨论】：