javascript - 固定标题元素在窗口上移动减少

Question

我的屏幕顶部有一个固定的菜单，效果很好，但是当我必须缩小浏览器窗口时，菜单中的所有元素都不会停留在原处，它们都会在菜单下方下拉到留在打开的窗口。我的想法是，当窗口变小时，我希望位置不会固定，因此它们会留在原位并可以滚动以查看其余内容。这可能吗？

这是菜单标题的 html 代码:

<div id="head_wrapper">
        <div id="head_company"></div><!---end head_company--->
        <div id="head_name"></div><!---end head_name---->

        <div id="head_search"></div><!---end head_search--->
        <div id="head_home" onclick="location.href='overview.php';"></div><!---end head_home--->
        <div id="head_settings" onclick="location.href='settings.php';"></div><!---end head_settings--->
        <div id="head_more"></div><!---end head_more--->


    </div><!---end head_wrapper--->

这是它的 CSS:

#wrapper #head_wrapper {
    background-image: url(../images/general/head_bar.png);
    background-repeat: repeat-x;
    float: left;
    height: 44px;
    min-width: 100%;
    width: auto !important;
    width: 100%;
    position: fixed;
    z-index: 10;
    margin-left: 208px;
}
#wrapper #head_wrapper #head_company {
    background-image: url(../images/general/navs/arion_co_button.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_company:hover {
    background-image: url(../images/general/hover/company_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_name {
    background-image: url(../images/general/navs/arion_logo.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 144px;
}
#wrapper #head_wrapper #head_more {
    background-image: url(../images/general/navs/head_more.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;

}
#wrapper #head_wrapper #head_more:hover {
    background-image: url(../images/general/hover/head_more_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings {
    background-image: url(../images/general/navs/head_settings.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings:hover {
    background-image: url(../images/general/hover/head_settings_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home {
    background-image: url(../images/general/navs/head_home.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home:hover {
    background-image: url(../images/general/hover/head_home_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_search {
    background-image: url(../images/general/navs/search_bar.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 327px;
    margin-right:15px;
    background-position-y: 5px;
    margin-left:31%;
}

感谢所有的帮助

Answer 1

将 #wrapper 和 #head_wrapper 样式更改为:

width: 100%
min-width: 960px; /* set here a fixed value >= menu width */

演示:http://jsfiddle.net/uPe2L/9/ (为了清楚起见，我删除了边距和背景并添加了边框)

顺便说一句，您的代码错误且困惑。您应该使用 ul li 结构。