html - Angular 标与导航菜单冲突

Question

我的导航菜单与 Angular 落横幅(图像)冲突。但是，它与导航菜单重叠。

这是分辨率大于 1024x768 时的样子:

这是它在分辨率为 1024x768(或更小)的浏览器中的样子:

这是我的代码(用于 Angular 落横幅和导航菜单):

#cornerbanner {
    background: url("../images/corner_banner.png") no-repeat;
    display: block;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    text-decoration: none;
    margin-top: -1px;
    clear: both;
}

ul#navigation {
    float: right;
    display: inline;
    margin-top: -28px;
}

ul#navigation li {
    list-style:none;
    display: inline;
    margin-left: 80px;
    text-transform: uppercase;
}

ul#navigation li a {
    color: #4C4C4C;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
}

ul#navigation li.active {
    border-bottom: 2px solid #C63E24;
    padding-bottom: 3px;
} 

Answer 1

您希望它在小于 1024 的分辨率下看起来如何？你想让 li 的尺寸变小吗？还是出现水平滚动条？

我的建议是考虑将固定宽度的设计与网格系统相结合，例如:

• Skeleton
• 960gs

编辑

如果您希望它们并排放置，您可以:

• float #cornerbanner 而不是绝对位置
• 在 ul#navigation 上放置 margin-right: 117px

这两者都要求包含它们的父级足够宽以容纳它们。