Question

我正在创建一个页面（在下面链接）并使用HTML5标记nav。但是，如果在Google Chrome中调整窗口大小，则菜单会跳至div.banner。

以下

为什么会发生这种情况，我该如何解决？

以下是我正在设计的页面：http://ubuntuone.com/1O7MLCGfZ0EqxQSFlpy4Yr

Answer 1

<强> CSS

将以下css样式添加到第no行的a.brand。 71和行号。 343

a.brand {
display: block;
float: left;
}

将以下css样式添加到第no行的标题中。 125和行号。 397

header{
 clear:both;
}

Answer 2

我认为这对你有用：

在第363行：

            nav {
    height: 50px;
    width: 400px; /* 5x the length of each nav item */
position:absolute;     /* use positioning rather than "float:right;" */
top:0px;
right:0px;
    padding: 0;
    margin: 0;
    color: #004824;
    background: #fff;
    vertical-align: middle;
}

并在第331行：

        div.banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    z-index: 2;        /* change z-index so img will be on top */
    border-bottom: 1px solid #004824;
}

以下是jsFiddle可能有助于演示。

为什么此菜单会在Chrome中移动？

2 个答案: