Использование CSS для формы с несколькими столбцами

Question

какие-нибудь предложения о том, как сделать такую ​​форму? http://i.imgur.com/vT7tC.png

Я использую таблицы + ввод с шириной: 100%, я знаю, что это, вероятно, не лучший способ (также по какой-то причине ширина ввода: 100% становится больше, чем [td] или [div] (красная граница на этом изображении от [div] [input ...] [/ div])

спасибо

Answer 1

Вы можете перемещать левую метку / входы влево и правую метку / входы вправо.

Вам нужно будет указать ширину, иначе у вас будет большой разрыв между столбцами, и ваш средний столбец не будет совпадать с вашим большим правым вводом.

Вот как я мог бы закодировать эту форму:

HTML

<div class="content">
    <div class="row">
        <div class="lrow">
              <label>aaa aaa</label>
              <input type="text" class="large">
        </div>
        <div class="rrow">
              <label>bbb</label>
              <input type="text" class="small">
        </div>
    </div>
    <div class="row">
        <div class="lrow">
              <label>ccc</label>
              <input type="text" class="small">
        </div>
        <div class="rrow">
              <label>ddd ddd</label>
              <input type="text" class="large">
        </div>
    </div>
    <div class="row">
        <div class="lrow">
              <label>eee</label>
              <input type="text" class="small">
        </div>
        <div class="rrow">
              <label>fff fff</label>
              <input type="text" class="small">
        </div>
        <div class="crow">
              <label>ggg</label>
              <input type="text" class="small">
        </div>
    </div>
</div>

CSS

.content {width:542px;}
.row {overflow:hidden;margin:5px 0;}
.row label {float:left;text-align:right;width:60px;margin-right:5px;}
.row input {float:left;}
.lrow {float:left;}
.rrow {float:right}
.large {width:300px;}
.small {width:100px;}

Answer 2

не тратьте свое время на изготовление колонок вручную.

просто используйте Blueprint CSS Framework . он действительно приятный и простой в использовании и выполняет работу так, как вы хотите.

самое главное, вам больше не нужно заботиться о совместимости браузера.