html - 如何制作与包含它的 div 一样长的文本 <input> 标签？

Question

我有一个表单输入，旁边有一个标签，如下所示:

<div id="loginbox">
    <form>
        <div>
            <span>Username</span>
            <input type="text">
        </div>

        <div>
            <span>Password</span>
            <input type="password">
        </div>

        <div>
            <input type="submit" value="Login">
        </div>
    </form>
</div>

然后我有一些 CSS 可以设置登录框的宽度和跨度字段，如下所示:

#loginbox {
    border: 1px solid black;
    width: 300px;
}

#loginbox span {
    display: inline-block;
    width: 80px;
    text-align: right;
}

这是这段代码的 jsfiddle:

http://jsfiddle.net/7TNNq/

请注意输入框如何不跨越整个 div 的长度。如何让它充分展开？

Answer 1

你可以把

#loginbox div input {
  width: 70%;  
}

它会扩展到 div 的边缘，但我相信有更好的方法来实现它。

希望对你有帮助