0

在此处输入图像描述

在上方，您可以看到堆叠 div 向左浮动的图像。这是当前的标记：

<nav id="category-menu">
 <div class="category-top-row">
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a>
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a>
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a></div><!-- /#category-top-row-->
 <div class="category-bottom-row">
   <a href="categories/category-name">
    <div id="category-menu-button">Category Example
    </div>
   </a>
   <a href="categories/category-name">
    <div id="category-menu-button">Category Example
    </div>
   </a>
 </div><!-- /#category-bottom-row-->
</nav>

所以这就是我的想法，如果这是可能的，也许有人可以阐明：

目前，该网站的宽度从 1200 像素扩展到使用 css3 媒体查询的移动设备。当移动分辨率加载页面时，我调整这些图像以堆叠成 2 列，以便我们有足够的空间来查看它们中的每一个。但是，理想情况下，我希望用户能够用手指水平滚动这些类别，但仍保持设备的宽度。（即。我希望类别菜单包装仍然保持移动宽度，并且只允许在该包装中滚动）

我曾想过创建一组重复的类别 div，称为

<nav id="category-menu-mobile">
....
etc

和 display:none 到“非移动”类别包装器，切换到新的移动风格类别。但这甚至有可能吗？谷歌是怎么做到的！div 是否可以像我想象的那样在移动设备上滚动（无边界，并且不显示滚动条）？起初我认为框架背后的功能与我想要的类似，但我不想在那个“窗口”中加载 URL。只是我喜欢的移动菜单。

在移动设备上加载 Google 时，我可以比较的最接近的是 Google 的图标滚动条：

Google 移动网站示例

4

1 回答 1

2

您应该可以通过在移动媒体查询中显式设置width和属性来做到这一点：overflow-x

@media screen and (device-width: 480px) {
    #category-menu {
        width: 480px;
        overflow-x: scroll;
    }
}
于 2012-05-08T00:41:21.043 回答