Question

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

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

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

我正在尝试创建一个没有滚动条的网站。（以防万一相关）

Answer 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>

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

防止按钮移动浏览器大小

1 个答案: