Question

首先，这里是代码：

#menu {
    padding:0;
    margin-top:0px;
    position:absolute;
    top:0px;
    width:100%;
    float:left;
    overflow:hidden;



}


#menu li {
    list-style:none;
    float: left;
    position: relative; 
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border:1px solid black; 
    background-image: linear-gradient(#F2FF00, #AEFF00);
    margin-left:10px;
}



#menu a {
    display:block;
    padding:auto;
    text-align:center;
    padding:10px 10px;


    color: #0095FF;
    text-transform: uppercase;
    font: bold 25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 1px 1px 2px #0095FF;
}

缩小窗口时按钮向下移动。如果可以将高度设置为菜单以使其不会更改，但按钮仍然在菜单元素之外，为什么会发生这种情况？

这是jsFiddle：http://jsfiddle.net/nqdXc/

Answer 1

菜单上的宽度为100％，并且左侧浮动，如果菜单不适合li，它们会下拉。这是预期的行为。

我不确定您要达到的效果，但您可以在菜单上设置最小宽度，如下所示：

#menu {
    min-width: 360px;
}

如果您告诉我们所需的效果，我们可能会为您提供进一步的帮助

缩小窗口时导航栏折叠

1 个答案: