正確對齊控件

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

最簡單的方法：指定寬度和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

Answer 3

說真的，因爲你需要，你應該se表格。無論如何，你會有更多的HTML和CSS試圖實現這一點。

在Html中不使用表格的整個驅動器是用於佈置頁面等，您可能想要使用CSS重新排列頁面佈局（移動東西）。但我懷疑你會想重新排列你的表單佈局方式。