Div的重叠窗口调整大小

Question

调整页面大小时，我无法保持导航栏链接和标题的移动。 我已经尝试将所有内容放在包装div中但它似乎不起作用。任何帮助将不胜感激。

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

Answer 1

问题在于您为导航链接提供了绝对宽度。因此，当窗口变小时，链路不会成比例地收缩。请考虑使用百分比，或使用media queries设置不同的宽度。

导致问题的风格是：

#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