Резиновая форма поиска, поля и кнопка в одну строку / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

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

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновая форма поиска, поля и кнопка в одну строку

3 сообщений из 3, страница 1 из 1

Резиновая форма поиска, поля и кнопка в одну строку

#39520348

КириллН

Гость

Добрый день!
Подскажите, плз, начинающему, как сделать форму поиска, строка ввода которой автоматически заполняла всё свободное пространство между левым краем body и кнопкой. Т.е. когда изменяется ширина окна, должна изменяться только ширина поля ввода, а размер кнопки должен оставаться неизменным, и кнопка не должна перескакивать на следующую строку.
В .NET WPF для грида это делается просто:

Код: html

1.
2.

<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="Auto"/>

Т.е. вторая колонка занимает столько, сколько надо для её содержимого, а первая - всю остальную ширину.

Только так?

Код: html

1.
2.
3.
4.
5.

<table style="width:100%">
  <tr>
    <td width="100%"><input type="search" required style="width:100%"/>
    <td><input type="button" value="Искать"/>
</table>

...

Рейтинг:

0 / 0

13.09.2017, 12:14

| Ответить | Цитировать | Написать

Резиновая форма поиска, поля и кнопка в одну строку

#39520358

КириллН

Гость

Не люблю я table'ы для разметки... Но пока только так получается:

Код: html

1.
2.
3.
4.
5.

<table style="width:100%">
    <tr>
        <td width="100%"><input type="search" id="txtQuery" placeholder="Введите произвольную часть адреса для поиска..." autocomplete="off" autofocus style="width:100%" />
        <td><div style="white-space:nowrap"><button id="btnSearch"><span class="glyphicon glyphicon-search"></span> Найти</button></div>
</table>

...

Рейтинг:

0 / 0

13.09.2017, 12:25

| Ответить | Цитировать | Написать

Резиновая форма поиска, поля и кнопка в одну строку

#39520363

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

КириллН,

https://html5book.ru/css3-flexbox/

...

Рейтинг:

0 / 0

13.09.2017, 12:28

| Ответить | Цитировать | Написать

3 сообщений из 3, страница 1 из 1

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=39520358&tid=1444472]:	0ms
get settings:	11ms
get forum list:	14ms
check forum access:	4ms
check topic access:	4ms
track hit:	58ms
get topic data:	10ms
get forum data:	2ms
get page messages:	46ms
get tp. blocked users:	1ms
others:	250ms

total:	400ms