如何修复我的导航栏？不同屏幕定位不同

Question

我对 HTML 和 CSS 有点陌生。我有一个我想要的导航栏（徽标和 links）对齐到我页面上侧边栏的上方。它在不同屏幕上的不同位置（以及调整浏览器大小时），我不知道如何修复它。我做了一个 fiddle 的东西，我会 link 到该网站，这样你就会明白我的意思。 这是fiddle:The Fiddle

这是页面： The page

#header {
    width: 100%;
    height: 91px;
    margin: 0;
    top: 0;
}
#menu {
    float: right;
    width: 100%;
    height: 54px;
    margin-top: 0;
    background: #ffffff url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/menu_bar_zps6212d723.jpg) repeat-x left top;
    position: fixed;
}
#menu ul {
    margin: 0;
    padding: 0px 0 0;
    list-style: none;
    line-height: normal;
    margin-left: 28%;
}
#menu li {
    display: inline;
    text-align: center;
}
#menu a {
    display: block;
    float: left;
    height: 36px;
    padding: 18px 20px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}
li#logo {
    height: 52px;
    width: 52px;
    background: url(http://i1378.photobucket.com/albums/ah105/WinPhanNick/cb_logo_zpsd1b14443.png) no-repeat;
    margin-top: 1px;
    margin-right: 1px;
    margin-left: 1px;
}
#menu a:hover,
#menu .active a {
    background: #1687ef;
    color: #FFFFFF;
}
#logo {
    float: left;
    width: 270px;
    height: 76px;
    margin: 0px;
    padding: 15px 0px 0px;
    margin-left: 27%;
}

Answer 1

使您的 link 包装器（即 ul）与您的页面容器（即 892px）宽度相同，并将其设置为 margin: auto 以居中它。您也可以删除 margin-left: 28%。那是不需要的。您还有一个浮动问题，因此您的 ul 被折叠了。您需要清除浮动元素。您可以添加 overflow:hidden.

#menu ul{
   overflow: hidden; //clear float issue
   width: 892px; // same width as #page
   margin: 0 auto; //will center
   padding: 0px 30px; //add to keep the same padding as #page-bgtop
}

FIDDLE

如何修复我的导航栏？不同屏幕定位不同

How to fix my nav bar? Positioning is different on different screens

html

css

navbar