Question

使用jquery创建效果，当用户向下滚动时，屏幕顶部会出现黑色菜单。然而，我一直在尝试很多方法，但它无法显示我想要的东西。

我希望菜单的背景填充100％的屏幕宽度。屏幕的中间部分是固定宽度（960像素），但当用户屏幕超过960像素时，背景将扩展以填充侧面。

对于我的网站背景，它正在这样做，但对于菜单背景，我得到的唯一最接近的效果是背景填充整个屏幕宽度，但内容对齐到左边（我想要的是中心对准）。

菜单的div是#menu，css是menu.css

这里是代码的一部分：

  #menu {

    width: 100%;
    z-index:888; 
    display:none; 
    position:fixed; 
    top:0 ;
    left: 0;
}

ul.topnav {
    width: 100%;
    list-style: none;
    padding: 0 50px;
    float: left;
    text-align: left;
    background: #222;
    font-size: 1.2em;
    background: url(../images/css_menu/topnav_bg.gif) repeat-x;

}

Answer 1

width的{{1}}应为div#menu，此100%获取div。
要使background居中，它需要真实ul.topnav（所有width s）和li。

将您的CSS定义更改为：

margin auto

Answer 2

我无法直接在您的页面上进行测试，因为您有JavaScript解析错误，我不想在此时将代码复制到JSFiddle，但我可以提出建议。尝试将菜单的水平边距设置为自动：

div#menu {
    margin:0 auto;
}

或更迂腐：

div#menu {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

Answer 3

我已经检查过了，问题是浮点元素和边距。尝试使用这个css属性（我已将它们更改为我本地测试的绝对路径）：

#menu {
    display: none;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 888;
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/topnav_bg.gif) repeat-x;
}

ul.topnav {
    width: 820px;
    list-style: none;
    padding: 0 50px;
    float: none;
    text-align: left;
    background: #222;
    font-size: 1.2em;   
    margin: 0 auto;
}
ul.topnav li {
    float: none;
    margin: 0 auto;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/main-delimiter.png) 95% 4px no-repeat;
}

顺便说一下，好网站！

如何在具有100％宽度背景的情况下使菜单中的项目居中

3 个答案: