Question

我在网站上保留topnav时遇到了一些麻烦（如果您看到下面的链接，“Home”，“Archive”和“About”按钮）与我喜欢的位置一致保持浏览器大小调整，这是我的横幅的右边缘。最初，我有四个按钮，并设法保持一切顺序，但在我按下一个按钮后，事情变得有点不稳定。

感谢您的帮助。

Answer 1

如果你将topnav放在banner元素中，并使用这个css：

.banner {
    position: relative;
    display: block;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
    width: 930px;
    height: 349px;
    margin-bottom: 32px;
}

.topnav {
    position: relative;
    display: block;
    top:100%;
    width: 930px;
    height: 32px;
}

.topnav a{
    float: right;
}

topnav将是恒定的保证金。

Answer 2

您可以修复它 - 通过对您的网站应用以下更改，让导航器与右侧对齐：

#container-inner {
    margin-left: auto;
    margin-right: auto;
    width: 940px;
}

.topnav {
    /*Reset things that are unnecessary*/
    margin-left: 0;
    margin-right: 0;
    position: static;
    /*Set things to fix the problem*/
    margin-bottom: 20px; /*This accounts for the 20px space between this and the content.*/
    float: right;
}

#content {
    clear: both;
}

窗口调整大小的CSS topnav对齐问题

2 个答案: