正确对齐控件

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