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


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

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

http://i.stack.imgur.com/G8rKG.jpg

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

2   51   2011-08-04 13:19:18

2 ответа:

это возможно без 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%
}

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

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;
}