css - Div 在窗口调整大小上的重叠

Question

调整页面大小时，我无法阻止导航栏链接和标题移动。我试过把所有东西都放在一个包装器 div 中，但它似乎不起作用。任何帮助将不胜感激。

这是该页面的链接：http ://www.public.asu.edu/~rmtorren/broadway.html

Answer 1

问题是你给导航链接一个绝对宽度。因此，当窗口变小时，链接不会按比例缩小。考虑使用百分比，或使用媒体查询设置不同的宽度。

导致问题的样式是：

#navigation ul a:link {
padding: 5px 5px 15px;
margin-bottom: 2px;
display: block;
width: 100px;         /* CHANGE THIS */
text-decoration: none;
background-color: maroon;
color: #FFF;
}

媒体查询的一个示例可能是：

@media(max-width: 768px){
    #navigation ul a:link {
        width: 60px;
    }
}

以上将仅60 pixels在屏幕缩小时将链接更改为768px