Выровняйте элементы управления правильно - PullRequest
Новая
       3

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

4 голосов
/ 26 января 2011

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

enter image description here

Заранее благодарен за помощь, Laziale

Ответы [ 3 ]

3 голосов
/ 26 января 2011

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>
1 голос
/ 26 января 2011

Серьезно, вам нужно использовать таблицы. у вас будет намного больше html и CSS, пытающихся добиться этого в любом случае.

Весь привод к тому, чтобы не использовать таблицы в Html, предназначен для верстки страниц и таких, где вы можете изменить макет вашей страницы (переместить вещи), используя только CSS. но я сомневаюсь, что вы захотите изменить порядок расположения вашей формы.

0 голосов
/ 26 января 2011

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

...