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

В приведенном ниже примере:

Я хочу, чтобы текстовое поле заполняло все свободное пространство. Проблема заключается в том, что ширина раскрывающегося списка не может быть исправлена, поскольку его элементы не являются статическими. Я хотел бы решить это с помощью только css (без javascript, если это возможно).

Я попробовал решения, предложенные для подобных вопросов, без везения: (

Вот скрипка: http://jsfiddle.net/ruben_diaz/cAHb8/

Вот html:

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">General</option>
                <option value="2">Fruits</option>
                <option value="3">Ice Creams</option>
                <option value="4">Candy</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>

И здесь css:

#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-block;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}

Ответы

Ответ 1

Обновлено демо (проверено отлично в IE7/8/9/10, Firefox, Chrome, Safari)

Поплавьте левый и правый элементы.
В исходном коде HTML сначала поместите оба элемента с плавающей точкой (это самая важная часть).
Дайте средний элемент overflow: hidden; и ширину импликации 100%.
Введите текстовое поле в среднем элементе шириной 100%.

.category_dropdown_container {
    float: left;
}

input[type="submit"] {
    float: right;
    ...
}

.resizable_text_box {
    padding: 0 15px 0 10px;
    overflow: hidden;
}
.resizable_text_box input {
    width: 100%;
}

<div class="category_dropdown_container">
    <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
        ...
    </select>
</div>

<input name="commit" type="submit" value="Ask!" />

<div class="resizable_text_box">
    <input id="question_text_box" name="question[what]"
           placeholder="Write a query..." type="text" />
</div>

Ответ 2

Относительно недавнее свойство css для отображения "flex" решает эту проблему для вас:

Все, что вам нужно сделать, это изменить форму display на inline-flex, дать .resizable_text_box flex-grow: 100; и дать #question_text_box width: 100%

Полный пример из OP:

<style>
#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-flex;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
    flex-grow: 100;
}
#question_text_box {
    width: 100%   
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}
</style>

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">Options</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>

Flex-box позволяет делать то, что вы хотели сделать с css в течение 15 лет - наконец, здесь! Дополнительная информация: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ответ 3

Измените некоторые из этих элементов <span> на элементы <div>; затем float:left разделение вокруг выпадающего списка; затем укажите один из a overflow:hidden и входной элемент внутри него a width:100%;.

Вот пример. Здесь это снова с большим уменьшением.

За исключением того, что крепится кнопка отправки. Поэтому дайте <статическое позиционирование #form_wrapper (position:relative) и поместите кнопку отправки абсолютно. См. эту скрипту и этот.