正确对齐控件

我想调整网站上的相同控件的外观，但是看起来效果并不好。我想使用CSS来正确对齐控件。我想要复选框和标签左对齐，然后有点空间，然后文本框来了。另外我希望所有的文本框垂直对齐。如何使用css而不使用表格。正确对齐控件

enter image description here

预先感谢您的帮助，Laziale

2011-01-26 Laziale

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>

来源

2011-01-26 06:46:55 fesh

最简单的方法：指定宽度和float：左为输入容器（标签）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

来源

2011-01-26 00:37:33

说真的，因为你需要，你应该se表格。无论如何，你会有更多的HTML和CSS试图实现这一点。

在Html中不使用表格的整个驱动器是用于布置页面等，您可能想要使用CSS重新排列页面布局（移动东西）。但我怀疑你会想重新排列你的表单布局方式。

来源

2011-01-26 05:55:47

正确对齐控件

回答

相关问题