Question

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

的login.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;
}

和输出：

The output of the previous code

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

编辑：

与形成{ 边框：1px纯黑色; }

输出是：

Output with form border instead og #login_container border

Answer 1

将overflow:auto;添加到您的#login_container div。

<强> jsFiddle example

由于内部元素是浮动的，因此您需要指定overflow属性以使边框返回它们。

无法正确显示表格边框

1 个答案: