Div, надпись и поле ввода

[Charm0nt]

Всем привет.

Подскажите, как можно сделать следующее: в одном div одной строкой разместить поле ввода по ширине этого дива и справа от него кнопку. То есть получается, кнопка находится справа и ее размер соответствует ее реальной ширине, а поле ввода растянуто от левого края дива, до края кнопки.

Как можно реализовать такое? Заранее благодарен.

[121990]

Лучше нарисуй то что хочешь. Т.к описать суть вопроса буквами* у тебя не получилось.

[Charm0nt]

Как то так:

Это изображение можно считать div'ом, его размеры неизвестны. У кнопки постоянный размер. Поле ввода растянуто по ширине. Вроде несложно выглядит, но все равно не получается сделать.

[121990]

Какая должна быть ширина для поля ввода?

[Charm0nt]

Какая должна быть ширина для поля ввода?

поле ввода растянуто от левого края дива, до края кнопки

[121990]

Включи мозг. Куда импуту тянуться , если ширина дива неизвестна

[Charm0nt]

Div может быть переменного размера! 100% от размера контролла, на котором находится, или 80% и т. д.

[antonKar]

Как вариант: http://jsfiddle.net/kD4Bn/

Кнопку фигачим к правому краю через float: left, текстовое поле регулируем через абсолютное позиционирование, left и right

[121990]

Кнопку фигачим к правому краю через float: left, текстовое поле регулируем через абсолютное позиционирование, left и right

Работает только на webkit

[Charm0nt]

Неужели так сложно сделать это? Абсолютное позиционирование (по пикселях) в большей степени не подходит, так как дизайн резиновый.

Ну в общем мне получилось сделать то, что я сказал, но не очень хорошим способом: с помощью juery после загрузки страницы задать необходимый размер текстовому полю. Главный минус этого способа в том, что видно мигание элементов (сначала в поля один размер, а потом другой и положение кнопки при этом тоже меняется).

Возможно, есть лучший способ.

Edited August 5, 2013 by Charm0nt

[antonKar]

Абсолютное позиционирование (по пикселях) в большей степени не подходит, так как дизайн резиновый

У вас кнопка отправки что ли резиновая?

Можно попробовать использовать обёртку http://jsfiddle.net/sQBgj/

[Charm0nt]

antonKar, да, спасибо большое! Это именно то, что нужно.

Можно еще небольшое пояснение? Почему, если добавить свойство margin-right: 5px; для .text то отступ между полем ввода и кнопкой не появляется, но если добавить свойство margin-left: 5px; для .submit, то появляется?

[antonKar]

Потому что спецификация CSS, определяющая это, писалась обезьянами блок с float, отличным от none, выпадает из общего потока блоков. И .text просто не на что «опереться» отступом, он может только обтекать блок с float, отличным от none (включая и отступы этого блока).

Я примерно так это понимаю, подробно вопросом этим не задавался.