css - Fluid input elements

Question

I got this form...

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

With this CSS…</p>

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

I'm looking for an easy way to make the input fields fluid so that the width of input elements is always relative to the width of the fieldset element. In other words, the width of the label (125px) and input element should always be 100% of the width of the fieldset element. Is there an easy way to do this (without adding divs)?

Answer 1

见：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，这通常是一种更好的方法：如何将输入元素与其标签放在同一行？