流体输入元件 [英] Fluid input elements

问题描述

我有这个表单...

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

With this 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％。

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

推荐答案

请参阅： http://jsfiddle.net/thirtydot/pk3GP/

您可以通过在每个输入周围添加无害的 span 来实现：

You can do this by adding a harmless little span around each 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;
}

这篇关于流体输入元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！