Очень простой вопрос... Я взламываю его прямо сейчас с плавающими процентами (но я знаю, что должно быть лучшее решение), пожалуйста, посмотрите мою фотографию в качестве примера. Я хочу, чтобы у родителя было 100% по ширине, а в окне поиска была автоматическая ширина, которая всегда находится рядом с кнопкой поиска, и я хочу, чтобы кнопка поиска могла расти настолько широко, насколько она хочет (в зависимости от текста внутри него/отступы).
Правильный способ достижения этого теперь - Flexbox!
CSS "Flexbox" Путь (https://jsfiddle.net/1jxkyLdv/)
/* CSS
**************************************************************************/
/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 1rem; }
h2 { margin: 2rem 0 0; }
/* Flexbox Example */
.flexbox { display: flex; }
.flexbox .stretch { flex: 1; }
.flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
.flexbox div input { padding: .5em 1em; width: 100%; }
.flexbox div button { padding: .5em 1em; white-space: nowrap; }
<!-- HTML ------------------------------------------------------------------->
<h1>Flexbox Way!</h1>
<h2>Short Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Search</button>
</div>
</section>
<h2>Long Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Super Long Word For Search Button With Flexbox!</button>
</div>
</section>
Я презираю использование таблиц или используя css для того, чтобы divs действовали как таблицы), но здесь другой путь.
CSS "Table-Cell" Way (http://jsfiddle.net/eUhTM/3/)
* { box-sizing: border-box; }
section { width: 100%; display: table; padding: 1em 0 0; }
div { display: table-cell; width: 100%; }
input { width: 100%; padding: .5em 1em; }
button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }
<h1>Short Word</h1>
<section>
<div>
<input type="text" placeholder="Search..." />
</div>
<div>
<button>Search</button>
</div>
</section>
РЕШЕНИЕ
Основной трюк состоит в том, чтобы сделать раздел "display: table"; и divs внутри "display: table-cell;", вы вводите "width: 100%", и вы являетесь кнопкой "white-space: nowrap".
Я все еще интересуюсь решениями!
Спасибо всем за ваши замечательные ответы.
Это действительно немного сложно, особенно если вы заранее не знаете ширину кнопки. Вы могли бы отказаться от решения js, которое должно быть довольно простым, но я предпочитаю придерживаться css как можно больше.
Я придумал решение, которое работает в вашем макете:
<div class='searchBox'>
<input type='text' placeholder='search...'/>
<button>Search</button>
</div>
.searchBox {
position: relative;
padding: 10px;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid #999;
background: #fff;
padding: 10px;
}
button {
height: 40px;
background-color: #555;
padding: 0 10px;
border: none;
color: #fff;
position: absolute;
top: 10px;
right: 9px;
}
button:before {
content: '';
position: absolute;
display: block;
height: 40px;
top: 0px;
left: -10px;
width: 10px;
background: #fff;
border-left: 1px solid #999;
}
и скрипка: http://jsfiddle.net/VhZS5/
Не самое чистое решение, но оно должно быть перекрестным (современным) браузером (пограничный блок может потребовать некоторого префикса), является семантически правильным и не использует таблицы.
Обратите внимание, что я позиционировал кнопку absolute над полем ввода. Затем я использовал: прежде чем на кнопке слегка прикрыть окно ввода и создать впечатление промежутка между входом и кнопкой.
Сообщите мне, если вы хотите, чтобы я объяснил дальше.
Правильный ответ от MrRioku в комментариях
Мой оригинальный ответ
Это, вероятно, будет уменьшено до забвения по очевидным причинам, но как насчет этого:
<table style="width:100%;">
<tr>
<td style="width:100%;">
<input type="text" placeholder="Search" style="width:100%;">
</td>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>
Я использовал встроенный CSS для упрощенного просмотра:)