1

我是 HTML/CSS 的新手。我正在尝试制作一个菜单栏，该菜单栏将固定在我的页面底部。我正在根据用户菜单选择进行各种 javascript 操作。我的菜单看起来像这样：http: //jsfiddle.net/78HPq/

我的菜单栏的 HTML 代码是：

    <div id="menubar" >
<div id="menubar2"  style="width:1200px">
    <ol >
        <li id = 'l1' class="gbt"><a id="a1" onclick="handleLink(1)"    href="javascript:void(0);"><span id = 's1' class="gbts">Link 1</span></a></li>
        <li id = 'l2' class="gbt"><a id="a2" onclick="handleLink(2)"     href="javascript:void(0);"><span id = 's2' class="gbts">Link 2</span></a></li>
        <li id = 'l3' class="gbt"><a id="a3" onclick="handleLink(3)"     href="javascript:void(0);"><span id = 's3' class="gbts">Link 3</span></a></li>
        <li id = 'l5' class="gbt"><a id="a5" onclick="handleLink(5)"     href="javascript:void(0);"><span id = 's5' class="gbts">Link 4</span></a></li>
        <li id = 'l4' class="gbt"><a id="a4" onclick="handleLink(4)"     href="javascript:void(0);"><span id = 's4' class="gbts">Link 5</span></a></li>
    </ol>
</div>
</div>

但是，我遇到的问题是，如果将浏览器窗口的大小调整为小于我的菜单栏，我就没有水平滚动条。如果我使我的菜单栏位置相对或绝对，我会得到一个，但我需要“固定”以将其连接到页面底部。

任何建议，将不胜感激。谢谢，

4

3 回答 3

1

添加overflow: scroll;到#menubar。演示

#menubar{
    z-index:999;
    bottom: 30px;

    height:65px;
    width: 105%;
    background-color: #060612;
     filter:alpha(opacity=70);
    opacity:0.7;
    line-height:35px;
    overflow: scroll;
    position:absolute;
}

body {
    overflow-x: scroll;    
}
于 2013-09-06T05:12:13.527 回答
0

几个变化：

#menubar {    
    overflow-x: auto;
}

和

menubar2 {
    white-space: nowrap;
}

应该足够了。演示

于 2013-09-06T05:18:52.210 回答
0

如果您不想要overflow: scroll;，也许您可​​以尝试向overflow: auto;旅游body页面申请。仅在发生auto时添加滚动条。overflow

于 2013-09-06T06:36:01.903 回答