Стиль элемента ввода, чтобы заполнить оставшуюся ширину его контейнера

Question

Допустим, у меня есть HTML-фрагмент, подобный этому:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

Это не мой точный код, но важно то, что в контейнере фиксированной ширины есть метка и текстовый ввод на одной строке. Как я могу стилизовать ввод, чтобы заполнить оставшуюся ширину контейнера без переноса и не зная размера метки?

Answer 1

Вот простое и чистое решение без использования JavaScript или взлома таблиц. Это похоже на этот ответ: Автоматический ввод ширины текста, заполнение 100% другими плавающими элементами

Важно обернуть поле ввода диапазоном, равным display:block. Следующее, что кнопка должна идти первой, а поле ввода - второй.

Затем вы можете перемещать кнопку вправо, и поле ввода заполняет оставшееся пространство.

HTML

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

CSS

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

Простая скрипка: http://jsfiddle.net/v7YTT/90/

Обновление 1: Если ваш сайт ориентирован только на современные браузеры, я предлагаю использовать гибкие блоки . Здесь вы можете увидеть текущую поддержку .

Обновление 2: Это работает даже с несколькими кнопками или другими элементами, которые полностью используют поле ввода. Вот пример .

Answer 2

столько, сколько все ненавидят таблицы за разметку, они помогают с такими вещами, используя явные теги таблиц или используя display: table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Answer 3

Я предлагаю использовать Flexbox:

Обязательно добавьте правильные префиксы вендоров!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

Answer 4

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

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

Answer 5

Самый простой способ добиться этого будет:

CSS:

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

Похоже: http://jsfiddle.net/JwfRX/

Answer 6

Вы можете попробовать это:

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

Answer 7

Очень простой трюк - использование формулы CSS calc. Все современные браузеры, IE9, широкий спектр мобильных браузеров должны поддерживать это.

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>