文章/答案/技术大牛

发布

社区首页 >问答首页 >网站上的导航定位不正确

问网站上的导航定位不正确
EN

Stack Overflow用户

提问于 2010-07-26 00:37:00

回答 1查看 33关注 0票数 0

我现在正在将我的项目组合模型转换成html/css，我遇到了一些让我困惑的事情。

http://www.mozazdesign.co.cc/

如您所见，导航文本放置在错误的位置；我希望它与标记内联。我已经查看了代码加载和其他网站，但不知道为什么它不能工作。

这是确切的代码：

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

你知道为什么它的位置不正确吗？

提前感谢！

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-07-26 00:41:54

添加一个新的CSS类：

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

调整顶部的值，直到它看起来正确。

相对位置表示‘将此元素放置在它自然出现的位置’，然后您可以使用'Top‘和'Left’值(正值表示向下和向右移动，负值表示向上或向左移动)来修改其相对于相对位置的位置。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3330044

复制

相似问题

问网站上的导航定位不正确
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网站上的导航定位不正确EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网站上的导航定位不正确
EN