0

幅が 100% に設定された大きなメニューを作成しました。この div を左から右 (X 軸上) にスクロールできるようにします。それに応じてスクロール左とスクロール右のプロパティを設定しましたが、それでも機能しません。何か間違ったことをしていると確信しています。アドバイスをいただければ幸いです。ありがとう。

コードはjsFiddleにあります

4

1 に答える 1

6

100% ではない幅を設定する必要があります。ディメンションとオーバーフローをオンにしてメニューをコンテナー div に設定し、実際のメニューをその内部で非常に広く設定します。ボックス 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 (およびオリジナル) で指摘されているように、overflow-x、overflow-y を使用できます。私は物事をシンプルに保とうとしていました。

于 2012-07-26T12:31:13.083 に答える