Как сделать так, чтобы элемент ввода занимал все оставшееся горизонтальное пространство?
Вот код:
<div style="width:400px">
some text..
<input type="text" />
<button value="click me" />
</div>
Как сделать так, чтобы элемент ввода расширялся, чтобы заполнить все оставшееся пространство, оставаясь на той же строке? Если я поставлю 100%, он пойдет на собственную линию...
3 ответа
Смотрите: http://jsfiddle.net/thirtydot/rQ3xG/466/
Это работает в IE7+ и во всех современных браузерах.
.formLine {
overflow: hidden;
background: #ccc;
}
.formLine input {
width: 100%;
}
.formLine label {
float: left;
}
.formLine span {
display: block;
overflow: hidden;
padding: 0 5px;
}
.formLine button {
float: right;
}
.formLine input, .formLine button {
box-sizing: border-box;
}
<div class="formLine">
<button>click me</button>
<label>some text.. </label>
<span><input type="text" /></span>
</div>
button
должен идти первым в HTML. Слегка неприятный, но c'est la vie.
Ключевым шагом является использование overflow: hidden;
: почему это необходимо, объясняется по адресу:
- http://colinaarts.com/articles/the-magic-of-overflow-hidden/
- Как работает контекст блочного форматирования CSS?
Дополнительный промежуток вокруг input
необходимо, потому что display:block;
не влияет на input
: Что это такое в CSS/DOM, что предотвращает расширение поля ввода с блоком display: block до размера его контейнера
Если вы хотите кросс-браузерное решение, вы можете использовать таблицу
<table>
<tr>
<td>some text</td>
<td><input type="text" style="width:100%" /></td>
<td><button value="click me" /></td>
</tr>
</table>
Если вы не можете использовать таблицу, это будет сложнее. Например, если вы точно знаете ширину некоторого текста, вы можете попробовать это следующим образом:
<div style="padding:0px 60px 0px 120px;">
<div style="width:120px; float:left; margin:0px 0px 0px -120px;">some text</div>
<input type="button" style="width:50px; float:right; margin:0px -55px 0px 0px;" />
<input type="text" style="width:100%;" />
</div>
Если вам не нужна поддержка старых браузеров (IE <= 9), используйте макет flexbox:
div{
background-color: red;
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
}
div input {
flex: 1;
-webkit-flex:1;
-ms-flex: 1;
-moz-flex: 1;
min-width: 200px;
}