Как обосновать поля ввода формы с помощью CSS?

У меня есть простая форма ввода регистрации (хамл для краткости здесь :)

%form#signup
  %fieldset
    %input.email{type:'text'}
    %br
    .name
      %input.first-name{type:'text'}
      %input.last-name{type:'text'}

и CSS:

#signup { width: 350px; }
fieldset { width: 100%; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { /* occupy remainder of 'name' line */ }

Как оформить это так, чтобы.email поле является полной ширинойfieldset и.last-name и / или.first-name поля расширяются, чтобы также заполнить всю ширинуfieldset и с правым краем, выровненным с.email поле?

Да, это может быть проще использоватьtable здесь, но есть ли простой способ с CSS? Он должен работать только для браузеров, совместимых с css3, и разумно ухудшаться для IE8 и 9.

скриптовая ссылка:http://jsfiddle.net/3UP9H/1

Ответы на вопрос(3)

Оригинальный ответ появляется подhr; ответ на вопрос, для ясности, представляется комбинациейbox-sizing (и его варианты с префиксом поставщика), чтобы включитьborder-width а такжеpadding в определенномwidth элементов (а не их ширина, определяемая-ширина + граница-ширина + отступ) иfont-size: 0 для родительского элемента, который удаляет ошибочное пространство между двумяinput элементы (хотя пространство, технически, все еще существует; оно просто не имеет какого-либо размера, чтобы влиять на положение окружающих элементов).

Итак, CSS-код из второго примера ниже:

fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    width: 350px;
}

fieldset div input[type=text] {
    width: 105px;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 245px;
}

div.name {
    font-size: 0;
}​

JS Fiddle demo.


Original answer follows:

Один из способов выглядит так:

form {
    width: 350px;
}

fieldset {
    width: 100%;
}

​fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 350px;
}​​

fieldset div input[type=text] {
    width: 105px;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 241px;
}​

JS Fiddle demo.

Использованиеbox-sizing (и варианты с префиксом поставщика) просто включитьborder элемента, и любой назначенныйpadding в пределах определенной ширины элемента.

Я использовал самозакрытиеinput теги в связанном демо, так какinput элементы, насколько я знаю, не имеют закрывающих тегов</input>.

Я немного исправил вышеупомянутое, чтобы устранить проблему ошибочного пространства (между братьями и сестрами).input элементы в.name элемент от необходимости произвольных исправлений, чтобы позволить им обоим на одной строке (отсюда и странныйwidth: 241px в приведенном выше CSS):

form {
    width: 350px;
}

fieldset {
    width: 100%;
}

fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 350px;
}

fieldset div input[type=text] {
    width: 105px;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 245px;
}

div.name {
    font-size: 0;
}​

JS Fiddle demo.


Edited удалить измерения с фиксированной шириной и заменить на относительные, в процентах, на основе единиц измерения (как в исходном вопросе):

form {
    width: 350px;
}

fieldset {
    width: 100%;
}

fieldset input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
}

fieldset div input[type=text] {
    width: 30%;
    margin: 0;
}

fieldset div input[type=text] + input[type=text] {
    float: right;
    width: 70%;
}

div.name {
    font-size: 0;
}​

JS Fiddle demo.

К сожалению, нет способа установить ширинуinput элементы к100% по умолчанию, в то же время разрешая братьев и сестерinput элементы иметь разную ширину. Или, но это существенно более неудобно и требует, чтобы вы явно идентифицировали обоих братьев и сестер, хотя, возможно, выбрать второго или более позднего брата с+ или же~ комбинаторами невозможно выбратьfirst родной брат, основанный на том, что у него есть последующие родные братья (без JavaScript или другого языка сценариев, будь то на стороне клиента или сервера).

Измените эти две строки, чтобы они выглядели так:

.email { width: 99%; float: right; }
.last-name { width: 65%; float: right;}​

Скрипка Ссылка

EDIT Странно то, что оwidth в Chrome и IE есть то, что в Firefox есть дополнительная ширина 4 пикселя, которой нет. Проблема заключается в том, что Chrome и IE добавляют границу к ширине поля, в то время как Firefox компенсирует ширину внутреннего текстового поля, чтобы он соответствовал границе в указанных пределах. Увидетьэта версия скрипки для демонстрации.

EDIT2 Проверь этообновленная скрипка.

#signup { width: 350px; }
fieldset { width: 100%; border: 1px solid grey; padding:2px;}
.email { width: 99%;margin-bottom:2px; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { width : 67% }

DEMO

Update

#signup { width: 350px; }
fieldset { width: 100%; border: 1px solid grey; padding:2px;}
.email { width: 99%;margin-bottom:2px; }
.name { width: 100%; }
.first-name { width: 30%; }
.last-name { width : 67%; float:right; }

DEMO

Firefox Скриншот.

enter image description here

Ваш ответ на вопрос