导航栏按钮位于一个地方

Question

我两天前才用html开始编程，我在互联网上搜索了解决问题的方法。知道这一点，我的html知识在这一刻非常差，所以请不要苛刻。

我的问题是我想出的导航栏被集中在一个地方。

.button {
    position: fixed;
    text-decoration: none;
    color: #ffffff;
    background-color: #E7EDE7;
    color: #0d96d6;
    line-height: 3em;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}
.mainn {
    width: 64em;
    height: 25em;
    position: fixed;
}
.menuu {
    background-color: #E7EDE7;
    height: 3em;
    position: fixed;
}

<div class="menuu">
    <div class="mainn">
        <a class="button" href="home.html"> Home </a>
        <a class="button" href="contacts.html"> Contacts </a>
        <a class="button" href="pictures.html"> Pictures </a>
    </div>
</div>

Answer 1

从按钮类中删除position:fixed。

还可以使用.定位课程。

#menuu应为.menuu

您的所有按钮都有position:fixed;，并且没有设置top，bottom，left或right所以默认为{ {1}}和top:0;将依次堆叠所有

供参考，请阅读有关CSS定位的this文章

Answer 2

幸运的是，这是一个非常简单的问题。您只需要从按钮的样式中删除position: fixed，因为这是导致它们重叠的原因！

通过查看The Mozilla documentation for the position attribute，您可以更好地了解CSS中的布局和定位的工作原理。将项目的位置设置为fixed会将页面放在相对于父元素的页面上，而不需要对兄弟元素的任何考虑。

Answer 3

在您的按钮类上，您可能想要更改为

q=DV\-5PBRP&defType=edismax&qf=mfgpartno_search&q.op=AND

并添加

display: inline