css - 流体输入元件

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

我正在寻找一种使输入字段流畅的简单方法，以便输入元素的宽度始终相对于 fieldset 元素的宽度。换句话说，标签 (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 来实现，这通常是更好的方法:How can I put an input element on the same line as its label?