Question

我正在建立一个网站，我正在试图弄清楚为什么我的导航链接会在不同的分辨率上超过导航栏区域。我查找了答案，我发现在你的位置和宽度上使用％。但这仍然是一个重新解决的问题。这是我的代码。

HTML

<!Doctype html>
<html lang="en">
<head>
    <title>Template Two</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="visual.css">
</head>
<body>
    <div id="container">
        <div id="header">
        </div>
        <div id="navigation">
            <ul id="navGroup">
                <li class="navList"><a href="" id="home">Home</a></li>
                <li class="navList"><a href="" id="products">Products</a></li>
                <li class="navList"><a href="" id="about">About</a></li>
                <li class="navList"><a href="" id="contact">Contact</a></li>
            </ul>
        </div>
        <div id="center">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>





#container{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:800px;
    margin:0 auto;
    background-color:#cc9752;
    float:left;
    background: -moz-linear-gradient(#cc9752,#291f00);
}

#header{
    position:relative;
    top:1%;
    width:98%;
    height:20%;
    margin:0 auto;
    background-color:#0f3b5f;
    box-shadow: 0px 0px 40px 10px;
}

#navigation{
    position:relative;
    top:1%;
    width:98%;
    height:10%;
    margin:0 auto;
    background-color:#e5dbcf;
    box-shadow:10px 10px 20px;
    border-top: 4px ridge #0f3b5f;
    overflow:none;
    white-space:nowrap;
}
#navGroup{
    position:relative;
    left:0%;
    top:10%;
}
.navList{
    position:relative;
    list-style-type:none;
    display:inline;
    }

#home,#products,#about,#contact{
   color:brown;
   text-decoration:none;
   border-right:1px solid grey;
   position:relative;
   padding:5px 5px 5px 5px;
}

#contact{
    position:relative;
    left:60%;
}
#about{
    position:relative;
    left:40%;
}
#products{
    position:relative;
    left:20%;
}
#home{
    position:relative;
    left:5%;
}
#center{}
#footer{}

Answer 1

当HTML元素使用50％的宽度或高度时，它实际上意味着其父元素宽度或高度的50％，尝试为父元素设置宽度或高度。

Navbar以外的链接有不同的分辨率

1 个答案: