我正在制作一个包含多个 html 元素的简单网站(在本例中为 h1、ul、li、div类="测试").
出于某种原因，两个元素没有按正确的顺序显示。我有一个包含多个 li 条目的 ul。在那之下(至少在我的代码中)我有一个p。
但是，当我运行 HTML 文件时，ul 使用 p 作为使用 margin-top: 110px; 定位自身的引用点.这真的难倒我。如果您想查看我的代码并自己运行它，请点击此处:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style>
body {
text-align: center;
background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
background-size: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
font-size: 50px;
color: #CE4F04;
background-color: white;
margin-left: -10px;
margin-top: 15px;
margin-right: -10px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Pacifico', cursive;
}
ul {
left: 10px;
right: 10px;
position: fixed;
margin-top: 110px;
background-color: aliceblue;
text-align: center;
}
li {
display: inline;
padding-right: 10px;
padding-left: 10px;
}
.navigation-bar-items {
font-size: 30px;
color: grey;
}
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
}
.mainLogo {
text-align: center;
font-size: 50px;
color: #CE4F04;
background-color: white;
margin-left: -10px;
margin-top: 15px;
margin-right: -10px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Pacifico', cursive;
}
.main {
max-width: 1000px;
background-color: aquamarine;
margin-top: 1000px;
}
.test {
margin-top: 200px;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Welcome to my blog</h1>
</div>
<ul>
<div class="navigation-bar-items">
<li>Home</li>
<li>About me</li>
<li>Social</li>
<li>Contact Me</li>
<li></li>
</div>
</ul>
</header>
<div class="test">Hello</div>
</body>
最佳答案
你的 div与类 test有一个 margin:top放。这是在压低你的 <body>元素，它也会下推您的其他固定元素。
要解决此问题，请使用 position: relative和 top而不是 margin: top在你的 div与类 test .
实例:
body
{
background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
background-size: 100%;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
h1
{
background-color: white;
color: #CE4F04;
font-family: 'Pacifico', cursive;
font-size: 50px;
margin-left: -10px;
margin-right: -10px;
margin-top: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
ul
{
background-color: aliceblue;
left: 10px;
margin-top: 110px;
position: fixed;
right: 10px;
text-align: center;
}
li
{
display: inline;
padding-left: 10px;
padding-right: 10px;
}
.navigation-bar-items
{
color: grey;
font-size: 30px;
}
.container
{
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.mainLogo
{
background-color: white;
color: #CE4F04;
font-family: 'Pacifico', cursive;
font-size: 50px;
margin-left: -10px;
margin-right: -10px;
margin-top: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
.main
{
background-color: aquamarine;
margin-top: 1000px;
max-width: 1000px;
}
.test
{
position: relative;
top: 200px;
}<header>
<div class="container">
<h1>Welcome to my blog</h1>
</div>
<ul>
<div class="navigation-bar-items">
<li>Home</li>
<li>About me</li>
<li>Social</li>
<li>Contact Me</li>
<li></li>
</div>
</ul>
</header>
<div class="test">Hello</div>JSFiddle 版本:https://jsfiddle.net/zdb7du9L/2/
关于乱序显示的 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31767671/