Question

我制作了一个包含多个html项目的简单网站（在这种情况下为h1，ul，li，div class ="test"）。

出于某种原因，两件物品没有以正确的顺序出现。我有一个ul，其中包含多个li条目。在那之下（至少在我的代码中）我有一个p。但是，当我运行HTML文件时，ul会使用p作为参考点，以便将自己定位到margin-top: 110px;。它真的让我很难过。如果您想查看我的代码并自行运行，请转到：

这是Demo of the code:

<!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>

Answer 1

div.test的上边距与body的上边距＆gt;＆gt;崩溃body的最高内容边缘向下移动＆gt;＆gt; ul向下移动。如果您禁止body和div.test之间的边距折叠（通过将padding-top应用于body，例如），ul将按预期进行定位。

＆＃13;

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;
   padding-top: 1px
    }

    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; 
    }

＆＃13;

<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>

＆＃13;

Answer 2

少数事情：

首先，div内不能有ul。那是invalid HTML。

所以改为将ul包裹在div内。

<div class="navigation-bar-items">
    <ul>
       <li>Home</li>
       <li>About me</li>
       <li>Social</li>
       <li>Contact Me</li>
       <li></li>
    </ul>
</div>

其次，虽然您在问题中提到它，但代码中没有<p>（段落标记）。

第三，<header>元素仅用于介绍性或导航性内容。你也有#container。如果此容器用于您的主要内容，您可能还需要revise that structure。

第四，一旦你的HTML清晰且语义正确，就可以通过W3C Mark-Up Validation Service运行它。它会向您显示错误和警告。

我知道你也需要CSS的帮助。这里有其他答案。但是节省大量的维护工作并排除故障排除：首先按顺序获取HTML。然后专注于你的CSS。

祝你好运！

Answer 3

您的div班级test设置了margin:top。这会推下你的<body>元素，这也会推动你的其他固定元素。

要解决此问题，请在position: relative上使用top，使用margin: top和div代替test。{/ p>

直播示例：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

JSFiddle版本：https://jsfiddle.net/zdb7du9L/2/

显示无序的HTML项目

3 个答案: