gpt4 book ai didi

html - 无法正确显示窗体边框

转载 作者:太空宇宙 更新时间:2023-11-04 04:46:09 24 4
gpt4 key购买 nike

我对 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;
}

和输出:

The output of the previous code

为什么边框会越过密码文本框?

编辑:

与 形式{ 边框:1px 纯黑色;

输出是:

Output with form border instead og #login_container border

最佳答案

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

jsFiddle example

因为内部元素是 float 的,你需要指定 overflow 属性来让边框回到它们周围。

关于html - 无法正确显示窗体边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14449838/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com