Question

我是HTML和CSS的新手。我有一个我想要的导航栏（徽标和链接）对齐在我页面上的侧边栏上方。它在不同的屏幕上处于不同的位置（当浏览器调整大小时）并且我不知道如何解决它。我制作了一个小提琴，我将链接到该网站，以便您知道我的意思。 这是小提琴： 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

使您的链接包装器（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

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

1 个答案: