html - 如何使 div 可左右滚动？

Question

我创建了一个宽度设置为 100% 的大菜单，我希望这个 div 可以从左到右滚动。（在 X 轴上）。我已经相应地设置了 scroll-left 和 scroll right 属性，但它仍然不起作用。我确定我做错了什么，任何建议都值得赞赏。谢谢。

代码在jsFiddle

Answer 1

你需要有一个不是 100% 的宽度。将菜单设置为具有您的尺寸和溢出的容器 div，然后将实际菜单设置为在其中非常宽。将 box div 想象成一个框架。

http://jsfiddle.net/spacebeers/WkUNn/19/

.box {
    max-height:150px;
    border: 2px solid red;
    width: 100%;
    overflow: scroll;  
}

.megamenu {
    width: 3000px;
    overflow: hidden;
     max-height:100px;
    -webkit-box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.48);
    -moz-box-shadow:    0px -1px 12px rgba(0, 0, 0, 0.48);
    box-shadow:         0px -1px 12px rgba(0, 0, 0, 0.48);
    padding-bottom:45px;
    padding-top:5px;
    background: grey;
    border-top:1px solid #767676;
    font-family:Verdana, Tahoma, Sans-Serif;
    z-index: 100;
}

编辑：正如@c_kick 所指出的（在原版中），您可以使用溢出-x，溢出-y。我试图让事情变得简单。