正确对齐控件 [英] Align controls properly

问题描述

我想在我正在处理的网站上的相同控件上调整外观，但似乎效果不佳。
我想使用CSS正确对齐控件。
我要使复选框和标签向左对齐，然后有一点点空间，然后文本框就要来了。
我也希望所有文本框在垂直方向上对齐。
如何使用CSS而不使用表。

I want to adjust the appearance on same controls on the website which I am working on, but it seems that is not going good. I want to use CSS to properly align the controls. I want to have the checkbox and the label aligned left and then little bit room, then textbox is coming. Also I want all the textboxes to be aligned same vertically. How can I do that with css without using tables.

在此先感谢Laziale

Thanks in advance for your help, 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>

这篇关于正确对齐控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！