Question

我不知道为什么在这里的代码片段中，它完全符合div，但在我的托管网站上，在phpfiddle.org上，外部div是内部内容高度的两倍，所以我尝试使用bottom：0;在输入上使内容转到外部div的底部，但它没有工作。我该怎么做呢？

＆＃13;

#login {
border: 1px solid black;
position: absolute;
}
input {
bottom: 0;
}

＆＃13;

<div id = 'login'>
<form method = 'POST' action = 'login.php'>
<input type = 'text' name = 'username' maxlength = '20' placeholder = 'username' size = '5'>
<input type = 'password' name = 'password' maxlength = '20' placeholder = 'password' size = '5'>
<input type = 'submit' value = 'Login'>
</form>
</div>

＆＃13;

Answer 1

只需从表单中删除保证金：

form {
    margin: 0;
}

Answer 2

在#LOGIN中使用

＆＃13;

#login {
border: 1px solid black;
position: absolute;
 bottom: 0;
}
input {
bottom: 0;
}

＆＃13;

<div id = 'login'>
<form method = 'POST' action = 'login.php'>
<input type = 'text' name = 'username' maxlength = '20' placeholder = 'username' size = '5'>
<input type = 'password' name = 'password' maxlength = '20' placeholder = 'password' size = '5'>
<input type = 'submit' value = 'Login'>
</form>
</div>

＆＃13;

Answer 3

如果你没有将位置设置为相对位置，将底部设置为0将不会有很大的帮助...

无论如何，您遇到的问题都与用户代理（浏览器）正在应用的默认CSS规则有关，即为表单标记设置底部边距。将其设置为0并完成。

form {
    margin-bottom: 0;
}

Answer 4

元素不会自然地继承父母的位置属性。

这意味着您的输入元素没有绝对位置。此外，他们的父级没有指定高度，因此如果它们跨越父级的整个高度，它们就不能真正到达父级的底部。

您可能想要做的是为#login分配一个底部值，并确保其父级具有分配给它的高度。

你需要确定三件事。

元素的位置为：absolute;
元素有一个底值。
容器（父元素）具有指定的高度。

输入转到div的底部

4 个答案: