0

我对 CSS 不是很熟悉，我正在尝试在我的登录表单上应用边框，这是我使用的代码：

登录.html：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<div id="login_container">
    <form action="#" method="POST">
        <div class="row">
            <label for="username" class="label">Username</label>
            <input type="text" class="field" name="username" />
        </div>
        <div class="row">
            <label for="password" class="label">Password</label>
            <input type="password" class="field" name="password" />
        </div>
    </form>
</div>

css/style.css：

#login_container {
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    border:1px solid black;
    display:block;
}

.field {
    float:right;
    margin-left: 10px;
}

label {
    float:left;

}

.row{
    display:block;
    clear:both;
}

和输出：

前面代码的输出

为什么边框会越过密码文本字段？

编辑：

带形式{边框：1px纯黑色；}

输出是：

使用表单边框而不是 og #login_container 边框输出

4

1 回答 1

2

Add overflow:auto; to your #login_container div.

jsFiddle example

Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.

于 2013-01-22T01:29:01.340 回答