Question

我是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>

我遇到的问题是，如果将浏览器窗口调整为小于我的菜单栏，我就不会得到水平滚动条。如果我将我的菜单栏位置设置为相对或绝对，我会得到一个，但我需要“固定”以保持它附在页面底部。

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

Answer 1

将overflow: scroll;添加到#menubar。 Demo

#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;    
}

Answer 2

一些变化：

#menubar {    
    overflow-x: auto;
}

和

menubar2 {
    white-space: nowrap;
}

应该足够了。 DEMO

Answer 3

如果您不想overflow: scroll;，也许您可以尝试将overflow: auto;应用到旅游页面的body。 auto仅在overflow发生时添加滚动条。

HTML-CSS：自定义菜单不会水平滚动

3 个答案: