Правильно выровнять элементы управления

Question

Я хочу настроить внешний вид на тех же элементах управления на веб-сайте, над которым я работаю, но кажется, что это не так. Я хочу использовать CSS для правильного выравнивания элементов управления. Я хочу, чтобы флажок и метка выровнены влево, а затем немного, а затем текстовое поле. Также я хочу, чтобы все текстовые поля были выровнены одинаково по вертикали. Как я могу сделать это с помощью css без использования таблиц.

Заранее спасибо за вашу помощь, Лациале

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

Простейший способ: Укажите ширину и поплавок: левый для входных контейнеров (этикетки) 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. но я сомневаюсь, что вы захотите изменить порядок создания вашей формы.