防止按钮在浏览器上移动re大小

-2

我有一个简单的问题：每次重新调整窗口大小时，我的导航按钮都会移动。我已经搜索了至少一周，似乎无法找到解决方案。我已经设法使它们不会在重新大小上水平移动，但由于某些原因，它们会继续在重新大小的窗口上垂直移动。我真的不明白为什么会发生这种情况！任何人都可以帮忙吗？在此先感谢。

下面是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; 
}

我试图做一个网站，没有滚动条。（以防万一相关）

来源

2013-08-19 user2697468

严重的语法错误。 href：是错误的。还有类和id属性之后的空白。 – Nojan

[首先验证您的文档]（http://validator.w3.org/）。如果仍有问题，请回来。 – cimmanon

您的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-19 19:10:24 Nojan

防止按钮在浏览器上移动re大小

回答

相关问题