css - 我想让我的菜单栏在主题内自动调整大小

Question

我在我的样式表中添加了一个导航菜单背景，我发现当我缩放浏览器时，它自己的菜单不会像我的主题的其余部分一样调整大小，它从主题结构中占据了另一个位置......这就是我的导航CSS代码：

#main-menu {
margin-left:184px;
width: 978px;
    height: 56px;
    background: url(images/nav_bg.png);
    z-index: 1;
    position: relative;
    }

#main-menu ul {
background: url(images/nav_bg.png);
    margin: 0;
    height: 56px;
    }

#main-menu ul li {
background: url(images/navh_bg.png);
    float: left;
    height: 56px;
    position: relative;
    margin-right: 25px;
    }

#main-menu ul li:last-child,
#main-menu ul li.last {
    margin-right: 0;
    }

#main-menu ul li a {
    font-size: 13px;
    height:56px;
    line-height: 56px;
    vertical-align: middle;
    float: left;
    font-weight: bold;
    padding: 0 4px;
    color: #4C4C4C;
    }

#main-menu ul li:hover { 
background: url(images/navh_bg.PNG) no-repeat scroll center bottom transparent;
    visibility: inherit;
color: #ffffff;
    /* fixes IE7 'sticky bug' */
    }

#main-menu ul li a:hover {
background: url(images/navh_bg.PNG)no-repeat scroll center bottom transparent;
    text-decoration: none;
    visibility: inherit;
    color: #ffffff;

    }

Answer 1

您可以在所有宽度、边距和字体大小 (%) 中使用

#main-menu {
    margin-left: 10%;
    width: 90%;
    height: 56px;
    background: url(images/nav_bg.png);
    z-index: 1;
    position: relative;
    font-size: 100%
}