gpt4 book ai didi

html - 为什么我的页脚显示在页面顶部?

转载 作者:太空宇宙 更新时间:2023-11-04 06:23:51 25 4
gpt4 key购买 nike

我有一个非常简单的代码,但不知何故页脚显示在我的页面顶部。如您所见,我没有使用任何 float 、包装、网格或其他任何东西。您可以在本文下方找到代码。任何人都可以帮我弄清楚为什么会发生这种情况以及如何防止将来再次发生这种情况?提前致谢!

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
margin:0px;
}


main {
margin: 1cm auto;
width: 50%;
padding: 1cm;
border: 1px solid black;
}


nav {
border: 1px solid black;
}
</style>
</head>

<body>
<footer> Service Networking </footer>

<nav>
<label>Name: <input type="text" name="name"> </label>
<label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
<h1> Welcome! </h1>
<p> This is your first page </p>
</main>
</body>

</html>

最佳答案

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
margin:0px;
}


main {
margin: 1cm auto;
width: 50%;
padding: 1cm;
border: 1px solid black;
}


nav {
border: 1px solid black;
}
</style>
</head>

<body>

<nav>
<label>Name: <input type="text" name="name"> </label>
<label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
<h1> Welcome! </h1>
<p> This is your first page </p>
</main>

<footer> Service Networking </footer>
</body>


</html>

您使用的是 <footer> , 在 nav 之前和 main .

关于html - 为什么我的页脚显示在页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55253164/

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