スマホの画面サイズの時に横スクロールができるようにしたいです。

Question

以下のリンク先のページのおすすめ商品の部分（添付画像の部分）を画面サイズ640px以下の時に横スクロールで横並びに表示したいです。
参考リンク http://wonect.com/sg/fancl-mild-cleansing-oil-120ml.html

横スクロールのついて検索し、単純化したものを書いてみたら横スクロールさせることはできましたが、上記のサイトに適用しようとするとうまくいきませんでした。

やったことは横スクロールさせたい部分の全体に
width:1200px;
overflow-x: scroll;
overflow-y: hidden;
（ @media screen and (max-width: 640px) {} の中に記述 ）
を設定したり、上記の設定に
!important
をつけたり、tableにすればレイアウトを保持できるかと
display: table;
を設定したりもしましたがどうにもうまくいきません。

どうか解決策をご教授いただけますでしょうか。
よろしくお願いします。

Answer 1

1. ul要素の外側にdiv要素を置き、そこに overflow-x: scroll; を指定する。

（Widthは指定しなくても多分良い）
0. ul要素に必要なだけの width を指定する

くらいで出来ると思いますよ。

Comments

[h-o]

回答いただき誠にありがとうございます。

教えていただいたとおりにoverflow,widthと設定しても横スクロールは表示されるものの、全体的に縮小し、レイアウトを維持できませんでした。
縮小したときにレイアウトを維持したまま横スクロールがでるようにするにはどうすればいいのでしょうか？

[kei344]

> 全体的に縮小し、レイアウトを維持できませんでした
どうなったかがわかりませんが、中のli要素が％指定だったり、何個かずつでfloatをclearしているからでしょう。

あとはデベロッパーツールで確認してみてください。
http://www.buildinsider.net/web/chromedevtools/01

[h-o]

ありがとうございました。

[kei344]

どのように解決したのかを回答欄にお書きいただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

[h-o]

1.ulの外側にoverflow-x: auto;
2.ulに横幅に指定
3.liにdisplya: block;
でうまくいきました。

[kei344]

追記ありがとうございます。

Answer 2

.table{
display:table;
} 

.table .tr {
display:table-row;
}

.table .tr .td {
display:table-cell;
}

ぐらいしないと意味がなかったはす。

display:table;

Comments

[h-o]

ご回答いただき誠にありがとうございます。

Answer 3

対象のulタグにClassが付いていると思うのですがソレを削除してから適応させていますか？？？

希望の形になるようにCSSをコーディングしてからClassを戻してどこのCSSがバッティングしているか調べたらわかりやすいですよ。

Comments

[h-o]

ご回答頂き誠にありがとうございます。

＞対象のulタグにClassが付いていると思うのですがソレを削除してから適応させていますか？？？
リンク先のサイトはMagentoというオープンソースのEC構築プラットフォームで、classはテンプレートファイルから動的に出力されるため削除することは難しいです。

cssのバッティングについては、Chromeのデベロッパーツールでulに指定されたcssの内容を変更したり、削除してみましたが、指定した横幅を固定できず、横スクロールも表示されません。

希望の部分を横スクロールさせるには、その部分の横幅を指定して、overflowでscrollをしていすれば良いと考えているのですがもっと他の設定が必要なのでしょうか？