HTML项目显示出无序_Html_Css - Fatal编程技术网

HTML项目显示出无序

html css

HTML项目显示出无序,html,css,Html,Css,我正在创建一个包含多个html项的简单站点（在本例中为h1，ul，li，div class=“test”）由于某些原因，两个项目没有以正确的顺序显示。我有一个具有多个li条目的ul。在这下面（至少在我的代码中），我有一个p。但是，当我运行HTML文件时，ul使用p作为参考点，以边距顶部：110px定位自身。这真让我难堪。如果您想查看我的代码并自己运行，请点击这里：这是一个身体{ 文本对齐：居中；背景图片：url(https://classconnection.s3.amazonaws

我正在创建一个包含多个html项的简单站点（在本例中为

h1

，

ul

，

li

，

div class=“test”

）

由于某些原因，两个项目没有以正确的顺序显示。我有一个具有多个

li

条目的

ul

。在这下面（至少在我的代码中），我有一个

。但是，当我运行HTML文件时，

ul

使用

作为参考点，以

边距顶部：110px定位自身。这真让我难堪。如果您想查看我的代码并自己运行，请点击这里：
这是一个

身体{
文本对齐：居中；
背景图片：url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
背景大小：100%；
字体系列：“开放式Sans”，无衬线；
}
h1{
文本对齐：居中；
字体大小：50px；
颜色：#CE4F04；
背景色：白色；
左边距：-10px；
边缘顶部：15px；
右边距：-10px；
填充顶部：10px；
垫底：10px；
字体系列：“Pacifico”，草书；
}
保险商实验室{
左：10px；
右：10px；
位置：固定；
利润上限：110像素；
背景色：aliceblue；
文本对齐：居中；
}
李{
显示：内联；
右边填充：10px；
左侧填充：10px；
}
.导航栏项目{
字体大小：30px；
颜色：灰色；
}
.容器{
位置：固定；
排名：0；
左：0；
右：0；
文本对齐：居中；
}
.main标志{
文本对齐：居中；
字体大小：50px；
颜色：#CE4F04；
背景色：白色；
左边距：-10px；
边缘顶部：15px；
右边距：-10px；
填充顶部：10px；
垫底：10px；
字体系列：“Pacifico”，草书；
}
梅因先生{
最大宽度：1000px；
背景颜色：海蓝宝石；
利润上限：1000px；
}
.测试{
利润上限：200px；
}
欢迎来到我的博客

家
关于我
社会的
联系我


你好
你的div
与class测试一起有一个边距：top
集。这是向下推你的
元素，它也向下推你的另一个固定元素
要解决此问题，请使用position:relative
和top
代替margin:top
对div
进行类test

现场示例：

正文
{
背景图片：url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
背景大小：100%；
字体系列：“开放式Sans”，无衬线；
文本对齐：居中；
}
h1
{
背景色：白色；
颜色：#CE4F04；
字体系列：“Pacifico”，草书；
字体大小：50px；
左边距：-10px；
右边距：-10px；
边缘顶部：15px；
垫底：10px；
填充顶部：10px；
文本对齐：居中；
}
保险商实验室
{
背景色：aliceblue；
左：10px；
利润上限：110像素；
位置：固定；
右：10px；
文本对齐：居中；
}
锂
{
显示：内联；
左侧填充：10px；
右边填充：10px；
}
.导航栏项目
{
颜色：灰色；
字体大小：30px；
}
.集装箱
{
左：0；
位置：固定；
右：0；
文本对齐：居中；
排名：0；
}
.main标志
{
背景色：白色；
颜色：#CE4F04；
字体系列：“Pacifico”，草书；
字体大小：50px；
左边距：-10px；
右边距：-10px；
边缘顶部：15px；
垫底：10px；
填充顶部：10px；
文本对齐：居中；
}
梅因先生
{
背景颜色：海蓝宝石；
利润上限：1000px；
最大宽度：1000px；
}
.测试
{
位置：相对位置；
顶部：200px；
}

欢迎来到我的博客

家
关于我
社会的
联系我


您好
div.test
的上边距随着正文
正文
的上边距下移>ul
下移。如果您禁止正文
和div.test
之间的边距折叠（例如，通过将padding top
应用于正文
），则ul
将按预期定位

正文{
文本对齐：居中；
背景图片：url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
背景大小：100%；
字体系列：“开放式Sans”，无衬线；
顶垫：1件
}
h1{
文本对齐：居中；
字体大小：50px；
颜色：#CE4F04；
背景色：白色；
左边距：-10px；
边缘顶部：15px；
右边距：-10px；
填充顶部：10px；
垫底：10px；
字体系列：“Pacifico”，草书；
}
保险商实验室{
左：10px；
右：10px；
位置：固定；
利润上限：110像素；
背景色：aliceblue；
文本对齐：居中；
}
李{
显示：内联；
右边填充：10px；
左侧填充：10px；
}
.导航栏项目{
字体大小：30px；
颜色：灰色；
}
.容器{
位置：固定；
排名：0；
左：0；
右：0；
文本对齐：居中；
}
.main标志{
文本对齐：居中；
字体大小：50px；
颜色：#CE4F04；
背景色：白色；
左边距：-10px；
边缘顶部：15px；
右边距：-10px；
填充顶部：10px；
垫底：10px；
字体系列：“Pacifico”，草书；
}
梅因先生{
最大宽度：1000px；
背景颜色：海蓝宝石；
利润上限：1000px；
}
.测试{
利润上限：200px；
}

欢迎来到我的博客

家
关于我
社会的
联系我


你好几件事：<
<!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 class="navigation-bar-items">
    <ul>
       <li>Home</li>
       <li>About me</li>
       <li>Social</li>
       <li>Contact Me</li>
       <li></li>
    </ul>
</div>