流体输入元素

Question

我得到了这个表格…

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

我正在寻找一种简单的方法来使输入字段流体，使输入元素的宽度总是相对于字段集元素的宽度。换句话说，标签(125px)和输入元素的宽度应该始终是fieldset元素宽度的100%。是否有一种简单的方法来做到这一点(不添加div)?

Answer 1

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

您可以通过在每个input周围添加无害的小span来做到这一点:

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