Html 网站导航定位错误_Html_Css

Html 网站导航定位错误

html css

Html 网站导航定位错误,html,css,Html,Css,我目前正在将我的公文包模型转换为html/css，我遇到了一些让我困惑的事情如您所见，导航文本位于错误的位置；我希望它与标记对齐。我查看了代码加载和其他网站，但不明白为什么它不起作用这是确切的代码： <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="styles.css" rel="stylesheet" type="text/css"

我目前正在将我的公文包模型转换为html/css，我遇到了一些让我困惑的事情

如您所见，导航文本位于错误的位置；我希望它与标记对齐。我查看了代码加载和其他网站，但不明白为什么它不起作用

这是确切的代码：

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>

<body>

<div id="container">
    <div id="header">
        <div id="logo">

        </div><!--end logo-->

        <div id="nav">
            <ul id="main_nav">
                <li><a href="#">home</a></li>
                <li><a href="#">about me</a></li>
                <li><a href="#">gallery</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">contact</a></li>
            </ul><!--end main nav-->
        </div><!--end nav-->
    </div><!--end header-->



</body>

body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}

#nav a {
text-decoration: none;
color: white;
}

#container {
margin: 0 auto;
width: 960px;
}

#logo {
background:url('Images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px;  <!--check-->
}

#nav {
background:url('Images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;

}

#main_nav li {
list-style-type: none;
display: inline;
font-family: century gothic;
font-size: 18px;
color: white;
margin-right: 17px;
}


莫扎兹设计组合







身体{
填充：0px；
边际：0px；
背景：url（'Images/background.png'）；
字体系列：世纪哥特式；
}
#导航a{
文字装饰：无；
颜色：白色；
}
#容器{
保证金：0自动；
宽度：960px；
}
#标志{
背景：url（'Images/Logo.png'）；
高度：340px；
宽度：524px；
浮动：左；
左边距：0px；
}
#导航{
背景：url（'Images/Nav_Container.png'）；
宽度：427px；
高度：33像素；
浮动：对；
边缘顶部：100px；
}
#主导航李{
列表样式类型：无；
显示：内联；
字体系列：世纪哥特式；
字号：18px；
颜色：白色；
右边距：17px；
}

你知道它为什么定位不正确吗

提前谢谢

添加一个新的CSS类：

#main_nav
{
    position: relative;
    top: -10px;
}

调整顶部值，直到看起来正确为止

相对位置表示“将此元素定位在其自然出现的位置”，然后您可以使用“

顶部”和“左侧”值（正值用于将其向下和向右移动，负值用于将其向上或向左移动）修改其相对位置。
还值得注意的是，如果他更改边距
（从margin:1em 0；
到类似：margin:0 0 1em；
）主导航元素会自然上移。（或者不会被1em
下移）非常感谢！没有想到主导航的样式。出于某种原因，它添加了填充，即使我在车身样式中将填充设置为0px？哦，谢谢你的帮助！：D