Элементы ввода жидкости

Я получил эту форму ...

<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
    <fieldset>
        <legend>Who are you?</legend>
        <label for="first-name">First name</label><input type="text" name="first_name" required /><br />
        <label for="last-name">Surname</label><input type="text" name="last_name" required /><br />
        <label for="email">E-mail</label><input type="email" name="email" required /><br />
        <input type="button" name="submit1" id="submit1" value="Next" />
        <input type="button" name="clear" id="clear" value="Clear" />
    </fieldset>
</form>

С помощью этого CSS…

form {
    margin: 24px 0 0 0;
}

form legend {
    font-size: 1.125em;
    font-weight: bold;
}

form fieldset {
    margin: 0 0 32px 0;
    padding: 8px;
    border: 1px solid #ccc;
}

form label {
    float: left;
    width: 125px;
}

form label, form input {
    margin: 5px 0;
}

Я ищу простой способ сделать поля ввода плавными, чтобы ширина элементов ввода всегда была относительно ширины элемента fieldset. Другими словами, ширина метки (125 пикселей) и элемента ввода всегда должна составлять 100% ширины элемента fieldset. Есть ли простой способ сделать это (без добавления div)?


forms css fluid-layout
person rkhff    schedule 19.08.2011    source источник
comment
Вы имеете в виду, что элемент ввода должен использовать оставшуюся ширину (т.е. разницу между шириной набора полей и шириной метки), а не то, что ввод должен составлять 100% ширины набора полей?   -  person Spycho    schedule 19.08.2011
comment
Подобно этому вопросу   -  person Spycho    schedule 19.08.2011
comment
Да, именно это я имел в виду - извиняюсь, если это не ясно ...   -  person rkhff    schedule 19.08.2011

Ответы (1)


arrow_upward
30
arrow_downward

См. http://jsfiddle.net/thirtydot/pk3GP/.

Вы можете сделать это, добавив безобидный маленький span вокруг каждого input:

<span><input type="text" name="first_name" required /></span>

И этот новый CSS:

form input {
    width: 100%;
}
form span {
    display: block;
    overflow: hidden;
    padding: 0 5px 0 0;
}

Вы также можете сделать это с помощью display: table, что обычно является лучшим подходом: Как разместить элемент ввода в той же строке, что и его метка?

person thirtydot    schedule 19.08.2011
comment
<span> установлен на display: block означает <div>, верно? - person BairDev; 24.06.2019
comment
@BairDev: Простой ответ - да. Семантически они разные, но это не имеет особого значения. - person thirtydot; 24.06.2019