首页 文章

如果包含它的div,我如何制作文本<input>标签?

提问于
浏览
4

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

<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的整个长度 . 如何让它完全展开?

3 回答

  • 1

    See: 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>
    
  • 1

    你可以放

    #loginbox div input {
      width: 70%;  
    }
    

    它会扩展到div的边缘,但我确信有更好的方法可以解决它 .

    希望这可以帮助

  • 2

    这里是 .

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

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

相关问题