微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在PC和手机上滑动菜单?

如何解决如何在PC和手机上滑动菜单?

我有一个包含所有类别的导航菜单
在 PC 上它与水平滚动条配合得很好,但是在智能手机上,我不得不用 CSS 隐藏滚动条
这导致现在在 PC 上它们无法滑动类别
我怎样才能让它在两者上都能工作?

.parent {
  width: 100%;
  height: 30px;
  border: 1px solid #AAA;
  white-space: Nowrap;
  overflow-y: hidden;
}

.child {
  height: 45px;
  overflow-x: auto;
}
<div class="parent">
  <div class="child">
    <table id="ctl00_ContentPlaceHolder1_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;">
      <tbody>
        <tr>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl00_hypCateg" href="Index.aspx?CodCateg=19">cat 1</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl01_hypCateg" href="Index.aspx?CodCateg=22">cat 2</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl02_hypCateg" href="Index.aspx?CodCateg=17">cat 3</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl03_hypCateg" href="Index.aspx?CodCateg=9">cat 23</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl04_hypCateg" href="Index.aspx?CodCateg=12">cat 5</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl05_hypCateg" href="Index.aspx?CodCateg=7">FARINA DA GRANI ANTICHI</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl06_hypCateg" href="Index.aspx?CodCateg=13">FRUTTA</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl07_hypCateg" href="Index.aspx?CodCateg=15">FUNGHI NATURALI</a> &nbsp;
          </td>
          <td>
            &nbsp;
            <a id="ctl00_ContentPlaceHolder1_DataList1_ctl08_hypCateg" href="Index.aspx?CodCateg=16">MAIALE</a> &nbsp;
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。