Как я могу поместить элемент ввода в ту же строку, что и его метка?

Я хотел бы поставить label и input[type=text] в одну строку, и я хотел бы, чтобы ширина input заполнила оставшуюся ширину содержащего элемента независимо от длины текста метки (см. первое изображение).

Я попытался использовать width: auto; для input, но, похоже, имеет статическую ширину. Я также пробовал width: 100%;, но это перемещает input в новую строку (см. Второе изображение).

Как я могу добиться этого с помощью CSS?

Ответ 1

Это возможно без JavaScript, см.: http://jsfiddle.net/Khmhk/

Это работает в IE7 + и во всех современных браузерах.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

Причина, по которой overflow: hidden настолько магически полезна в этом случае, объясняется здесь.

display: table-cell - это еще один вариант: http://jsfiddle.net/Khmhk/1/

Этот работает в IE8 + и всех современных браузерах:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

Ответ 2

Это все еще работает для меня, но ftr это то, как Bootstrap 3 делает это (спасибо @morten.c ответ на "Полный текст вставки в полноэкранном режиме внутри встроенной формы" ). Не знаю, сложнее ли сломать, чем @тридцать, или что-то еще. Но вот он, и здесь скрипка, которая также дает базовый пример того, как иметь дело с узкой точкой разрыва экрана.

HTML:

<form class="responsive">
    <input type="text" placeholder="wide input..."/>
    <span>
        <input type="submit"/>
    </span>
</form>

CSS

form.responsive, form.responsive * {
    box-sizing: border-box;
    width: 100%;
    height: 40px !important; /* specify a height */
}
form.responsive {
    position: relative;
    display: table;
    border-collapse: separate;

    /* just to be safe */
    border: 0;
    padding: 0;
    margin: 0;
}
form.responsive > input {
    position: relative;
    width: 100%;
    float:left;
    margin-bottom: 0;
    display: table-cell;
}
form.responsive span {
    position: relative;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}
form.responsive span input {
    margin: 0;
    margin-left: -1px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}