Вопрос по forms, layout, html, css – Как обосновать поля ввода формы с помощью CSS?

2

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

%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

ширина набора полей произвольна, но в идеале элементы должны использовать только относительные меры, чтобы не жестко задавать размеры во всем. tribalvibes
в порядке,jsfiddle.net/3UP9H/1    обратите внимание, что поле .email выходит за пределы границы набора полей (во всяком случае, в chrome). Цель состоит в том, чтобы просто выровнять по правому краю каждую строку набора полей, расширив поля ввода до полной ширины. ваше решение? tribalvibes
Вы согласны с абсолютными, а не относительными единицами? Поскольку вы явно указываете350px дляform сам? David Thomas
Покажи свойreal HTML и, в идеале, разместить ссылку наJS Fiddle demo. David Thomas

Ваш Ответ

3   ответа
0

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

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

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

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

опять же, это своего рода специальное решение, и теперь левый край не выровнен. положитьborder: 1px solid grey обратно наfieldset чтобы увидеть это. Вероятно, решение более сложное, чем настройка процентов. также ширина имени произвольна, например. вопрос просто направо (и налево) обосновать каждую строку полей ввода внутри набора полей. какие-нибудь эксперты css? tribalvibes
хорошо, это близко,jsfiddle.net/SapWq/2  но, как вы говорите, теперь имеет дополнительный запас в FF. Есть ли способ сделать это без специального случая для Моз? tribalvibes
0
#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

Проверьте обновление, тестировали в FF и Chrome, спасибо.
Нету. поле фамилии пропускается на другую строку. Речь идет не о настройке процентов. он должен соответствовать точно пикселю, независимо от ширины набора полей, размера шрифта, оформления границы и т. д. (или, по крайней мере, для данного оформления границы). tribalvibes
Я дал скриншот FF.
twitpic.com/9uoz7g tribalvibes
это не работает в FF. я ищу что-то принципиальное, то есть CSS говорит «расширить эти элементы, чтобы они были правильно выровнены»; как правило, а не что-то специальное, что просто работает (или нет) для примера. tribalvibes
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 или другого языка сценариев, будь то на стороне клиента или сервера).

вообще не касается селекторов, просто размер блока для выравнивания полей. если вы уменьшите свой ответ только до второго редактирования / демонстрации, я его приму. @saluce тоже был на правильном пути. Спасибо, парни! tribalvibes
Что касаетсяinline-block: agreed.
интересно. я посмотрю на размер коробки. встроенный блок является посторонним. tribalvibes
слишком много постороннего, чтобы пробраться сквозь него. Я предпочел бы видеть только первый абзац и последний пример кода. меньше - больше. ответ в одной строке, используйте атрибут cssbox-sizing исправитьinput рендеринг полей в браузерах. tribalvibes
Я отредактировал, чтобы уточнить, но я предпочитаю не удалять информацию из ответа (если это явно не так), если нет вероятности, что в процессе развития / развития может быть что-то полезное для кого-то другого.

Похожие вопросы