正确对齐控件

Question

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

提前感谢您的帮助，Laziale

Answer 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>

Answer 2

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

在 Html 中不使用表格的整个驱动力是为了页面布局，例如您可能希望仅使用 CSS 重新排列页面布局（移动内容）。但我怀疑您是否想要重新排列表单的布局方式。

Answer 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