html - css水平滚动查询

Question

所以我正在尝试为移动菜单 div 设置水平滚动条，我正在使用 http://jsfiddle.net/v2Ypj/它看起来相当简单，所以我使用了

.submenu .right.horizontal {
  height:160px;
  width: 700px !important;
  overflow-x: scroll !important;
  overflow-y: hidden;
  white-space: nowrap;
}

它只能垂直滚动那个 div(直到我发现我需要更改宽度)但由于某种原因它不能水平滚动。酒吧甚至没有出现。这是我正在测试的网站。 http://www.embroiderywear.com/test/responsivetest/index2.html任何帮助将不胜感激!

Answer 1

我在检查器中试了一下，想出了这个解决方案:

.submenu .right.horizontal {
  width: 100% !important;
  padding-left: 0px;
}

.submenu .right a {
  display: inline-block;
  float: none;
}

您的宽度设置为硬像素数量 (700px)。通过将宽度设置为 100%，它允许内容正确溢出。 A 标签的样式防止您的链接换行，从而使该区域可滚动。

我建议将上述样式放在媒体查询中。