身体出现在 header？
[英]Body appearing in header?
问题描述
Trying to add content to my body to continue the flow of my site, but anything placed in the body is appearing in the top-left of the header.
试图向我的正文添加内容以继续我的网站的流程，但正文中的任何内容都出现在 header 的左上角。
Any ideas for why this may be happening?为什么会发生这种情况的任何想法？
Stack overflow wants me to write more content.堆栈溢出要我写更多的内容。 Here's me writing more content.这是我写的更多内容。
<!DOCTYPE html>
<html>
<head>
<link href="flex.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500">
</head>
<header>
<div id="header">
<h1 class="title">brookfield corp</h1>
<nav class="top-nav">
<ul>
<a href="#recent"><li>recent</li></a>
<a href="#samples"><li>samples</li></a>
</ul>
</nav>
</div>
</header>
<body>
<h2>recent</h2>
</body>
</html>
html {
box-sizing: border-box;
}
.title {
font-family: 'Frank Ruhl Libre', serif;
text-align: center;
font-size: 4em;
background-color: hsla(140, 50%, 30%, .9);
color:cornsilk;
padding: 30px 0px 30px 0px;
margin: 0 auto;
height: 100px;
width: 100%;
top: 0px;
left: 0px;
position: absolute;
}
nav {
font-family: 'Frank Ruhl Libre', serif;
float: right;
text-decoration: none;
}
li {
color: black;
list-style: none;
display: inline;
opacity: .7;
text-decoration: none;
}
4 个解决方案
解决方案1
1 2021-03-16 01:36:53
This block:这个块：
<header>
<div id="header">
<h1 class="title">brookfield corp</h1>
<nav class="top-nav">
<ul>
<a href="#recent"><li>recent</li></a>
<a href="#samples"><li>samples</li></a>
</ul>
</nav>
</div>
</header>
Needs to move within需要搬进去
<body> </body>
Then you could continue, before closing </body> tag, with <div id="body"> or similar, following your <header></header> block.然后你可以继续，在关闭</body>标记之前，使用<div id="body">或类似的，跟随你的<header></header>块。
解决方案2
0 2021-03-16 01:41:05
Your <header> needs to be inside your <body> .您的<header>需要在您的<body>内。 Then have a <div> for you main content.然后有一个<div>为你的主要内容。
<!DOCTYPE html>
<html>
<head>
<link href="flex.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500">
</head>
<body>
<header>
<div id="header">
<h1 class="title">brookfield corp</h1>
<nav class="top-nav">
<ul>
<a href="#recent"><li>recent</li></a>
<a href="#samples"><li>samples</li></a>
</ul>
</nav>
</div>
</header>
<div class="main">
<h2>recent</h2>
</div>
</body>
</html>
解决方案3
0 2021-03-16 02:34:20
Remove absolute position from .title从 .title 中删除绝对.title
I also fixed up your body tags.我还修复了你的body标签。 All your content should be inside these tags您的所有内容都应该在这些标签内
HTML: HTML：
<!DOCTYPE html>
<html>
<head>
<link href="flex.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500">
</head>
<body>
<header>
<div id="header">
<h1 class="title">brookfield corp</h1>
<nav class="top-nav">
<ul>
<a href="#recent"><li>recent</li></a>
<a href="#samples"><li>samples</li></a>
</ul>
</nav>
</div>
</header>
<h2>recent</h2>
</body>
</html>
CSS: CSS：
html {
box-sizing: border-box;
}
.title {
font-family: 'Frank Ruhl Libre', serif;
text-align: center;
font-size: 4em;
background-color: hsla(140, 50%, 30%, .9);
color:cornsilk;
padding: 30px 0px 30px 0px;
margin: 0 auto;
height: 100px;
width: 100%;
top: 0px;
left: 0px;
}
nav {
font-family: 'Frank Ruhl Libre', serif;
float: right;
text-decoration: none;
}
li {
color: black;
list-style: none;
display: inline;
opacity: .7;
text-decoration: none;
}
解决方案4
0 2021-03-16 03:54:21
html { box-sizing: border-box; }.title { font-family: 'Frank Ruhl Libre', serif; text-align: center; font-size: 4em; background-color: hsla(140, 50%, 30%, .9); color: cornsilk; padding: 0px 0px 30px 0px; margin: 0 auto; height:fit-content; width: 100%; top: 0px; left: 0px; position: relative; } nav { font-family: 'Frank Ruhl Libre', serif; float: right; text-decoration: none; } li { color: black; list-style: none; display: inline; opacity: .7; text-decoration: none; }
<.DOCTYPE html> <html> <head> <link href="flex:css" rel="stylesheet" type="text/css"> <link href="https.//fonts.googleapis?com/css2:family=Frank+Ruhl+Libre:wght@500"> </head> <header> <div id="header"> <h1 class="title">brookfield corp</h1> <nav class="top-nav"> <ul> <a href="#recent"> <li>recent</li> </a> <a href="#samples"> <li>samples</li> </a> </ul> </nav> </div> </header> <body> <h2>recent</h2> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.