-2

我对 CSS 很陌生，所以提前道歉。

我有一个简单的问题：每当我调整窗口大小时，我的导航按钮都会移动。我已经用谷歌搜索了至少一个星期，但似乎找不到解决方案。我已经设法使它们不会在重新调整大小时水平移动，但由于某种原因，它们会继续在窗口重新调整大小时垂直移动。我真的不明白为什么会这样！谁能帮忙？！提前致谢。

这是HTML

`<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="css/experiment.css" type="text/css">
</head>
<body>
    <div id= "wrapper">
        <a href:"#" class= "button1"> Home </a>
        <a href:"#" class= "button2"> About </a>
        <a href:"#" class= "button3"> How it works </a>
        <a href:"#" class= "button4"> Pricing </a>
        <a href:"#" class= "button5"> Contact </a>
    </div>
</body>
</html>

这是CSS：

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

.button1 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 20px;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif; 
    color: #789D6C;
    margin: 0px auto;
}

.button2 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 170px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif;
    color: #789D6C;
}

.button3 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 320px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif;
    color: #789D6C;
}

.button4 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 510px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif;
    color: #789D6C;
}

.button5 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 660px;
    height: auto;
    width: auto;
    border: #122A0A;
    border-style: solid;
    border-width: 9px;
    background-color: #122A0A;
    text-align: center;
    font-family: Georgia,serif; 
    color: #789D6C;
}

我正在尝试制作一个没有滚动条的网站。（以防万一）

4

1 回答 1

1

您的 HTML 标记错误。它必须是这样的：

<div id="wrapper">
    <a href="#" class="button1">Home</a>
    <a href="#" class="button2">About</a>
    <a href="#" class="button3">How it works</a>
    <a href="#" class="button4">Pricing</a>
    <a href="#" class="button5">Contact</a>
</div>

此外，绝对定位每个导航项是创建导航菜单的最糟糕和最困难的方法。我建议你看几篇文章来创建一个简单的导航菜单。这里有一些：

于 2013-08-19T19:10:24.210 回答