1

首先是代码：

#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/

4

1 回答 1

1

您在菜单上有 100% 的宽度，并在 li 上向左浮动，如果菜单不能适合 li，它们将下拉。这是预期的行为。

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

#menu {
    min-width: 360px;
}

如果您让我们知道想要的效果是什么，我们或许可以为您提供进一步的帮助

于 2013-09-14T19:08:36.083 回答