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设置登录框和span字段的宽度，如下所示：

#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的边缘，但我确信有更好的方法来实现它。

希望这有帮助

Answer 2

在这里。

http://jsfiddle.net/7TNNq/35/

或者您可以将固定宽度设置为@spike建议。

Answer 3

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

<强> CSS：

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

#loginbox label {
    float: left;
    width: 80px;
}
#loginbox span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 0;
}
#loginbox span input {
    width: 100%;
}

<强> HTML：

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

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

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

如果包含它的div，我如何制作文本<input />标签？

3 个答案: