0
我正在制作一个新的网页作为学习HTML5的练习。不幸的是，我遇到了一个非常令人沮丧的问题。如何在标头元素的内部显示导航元素下方
我的页面有一个包含一个“h1”元素（页面标题）和两个“nav”元素的“topbar”标题元素。我希望“h1”元素出现在“顶栏”的左侧。我希望“nav”元素出现在“顶栏”的右侧。
导航元素“nav_secondary”包含两个链接，“注册”和“登录”。这应该出现在“顶栏”的右上角。在“nav_secondary”下面应该出现包含一行导航链接的“nav_main”元素。
不幸的是，我的网站看起来都错了。导航元素一直位于顶栏的左侧，并从屏幕上推出。我花了几个小时来改变CSS和Googling教程，但还没有找到解决方案。
这里是我的网页的上半部分的截图： top half of page displaying incorrectly
这里是什么，我希望它看起来像一个模拟的图像： top half of page displaying correctly mockup
这里是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Site Name - Page Title</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="fullscreen-bg"></div>
<header class="topbar">
<h1>Page Title</h1>
<nav class="nav_secondary">
<a href="register.html">Register</a>
<a href="signin.html">Sign in</a>
</nav>
<nav class="nav_main">
<a href="home">Home</a>
<a href="archive">Archive</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</nav>
</header>
<section class="bodycontainer">
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue, sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut lobortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Nullam varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
<article class="articlecontainer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusc
e ultricies nisl eget augue pellentesque, semper consequat mauris facilisis. Int
erdum et malesuada fames ac ante ipsum primis in faucibus. In luctus nisi augue,
sit amet interdum felis porta id. Nulla id orci id enim tincidunt euismod. Ut l
obortis quis arcu vitae fringilla. Fusce sagittis eget lectus vel vehicula. Null
am varius augue placerat dapibus lobortis. </p>
</article>
</section>
</body>
</html>
这里是我的CSS：
html {
height:100%;
}
body {
background: #000000;
color: #ffffff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
h1 {
font-size: 24px;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
background-attachment: scroll;
}
@media (min-width: 767px) {
.fullscreen-bg {
background: url('../img/background.jpg') center center/cover no-repeat;
}
}
.topbar {
background: #000000;
position: fixed;
display: block;
top: 0;
left: 0;
right: 0;
padding-left:50px;
border: none;
width: 100%;
height: 100px;
margin: none;
z-index: 999;
overflow: auto;
background: rgba(0, 0, 0, 0.85);
}
.topbar h1 {
float: left;
}
.nav_main {
float: right;
display: block;
margin-top: none;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 24px;
width: 100%;
height: 50px;
clear: both;
overflow: auto;
}
.nav_main a:link {
color: #ffffff;
}
.nav_main a:visited {
color: #ffffff;
}
.nav_main a:hover {
color: #C18E15;
}
.nav_secondary {
position: relative;
float: right;
display: block;
margin-top: 10px;
margin-right: 50px;
margin-bottom: none;
margin-left: none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 0px;
font-size: 14px;
width: 100%;
height: 50px;
clear: both;
overflow: auto;
}
.nav_secondary a:link {
color: #ffffff;
}
.nav_secondary a:visited {
color: #ffffff;
}
.nav_secondary a:hover {
color: #C18E15;
}
.bodycontainer {
padding-top: 100px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 0px;
display: block;
overflow: hidden;
margin: none;
}
.articlecontainer {
background: #000000;
padding-top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
display: block;
overflow: hidden;
float: left;
margin: 10px;
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.85);
}
有没有人知道我可以如何解决这个问题，所以它看起来应该像我的模型中所示的那样？请告诉我。
谢谢！
谢谢！这解决了这个问题。我感谢您的帮助。 – ag415