Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновая форма поиска, поля и кнопка в одну строку / 3 сообщений из 3, страница 1 из 1
13.09.2017, 12:14
    #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:25
    #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:28
    #39520363
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Резиновая форма поиска, поля и кнопка в одну строку
КириллН,

https://html5book.ru/css3-flexbox/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновая форма поиска, поля и кнопка в одну строку / 3 сообщений из 3, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 412ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1444472]:
 0ms
get settings:
 11ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 64ms
get topic data:
 13ms
get forum data:
 4ms
get page messages:
 39ms
get tp. blocked users:
 2ms
others: 251ms
total:  412ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]