Question

我正在使用Elementor页面构建器。我之所以这样说是因为它允许将CSS放置在小部件本身中。

我有div表的两个版本，一个用于PC和Tablet，另一个仅用于移动。它们在同一页面上共存，但每个部分都设置了显示选项。

两天前，我给移动版本添加了一个额外的类名“ scroll-table”，并将此css片段应用于该版本；

table.scroll-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

该表在Firefox移动浏览器上水平滚动很好，而在Chrome移动浏览器（在此浏览器上查看了客户端）上滚动得很好。这是很漫长的一天，所以我叫它退出。

昨天，我添加了更多CSS，以在注册链接所在的位置放置一个按钮（最后一栏）。我是通过在链接中添加类名“按钮”来实现的，“ btn”似乎已经存在，因为它立即缩小了文本。然后，我在两个小部件（移动设备和PC）中都添加了此CSS代码段。

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  border: 0;
  font-weight: bold;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
  background: #F39C25;
  color: #fff;
}

结果是按钮正确显示，但是在Firefox移动浏览器上它停止了水平滚动，而Chrome移动浏览器在水平方向上滚动了整个页面。客户可以接受Chrome移动版上的这种行为，但我对此并不感到高兴。前一天，当它在Firefox移动版上运行时，它作为一个容器滚动，下面带有滚动条。我觉得很累（有点天气），这也是客户所看到的。

在overflow-x: auto;中添加！important无效，因此我再次将其删除。

如果可以，将css添加到style.css中没有问题，并且安装了Child主题。但是，在Elementor FB组中，关于“您不需要孩子主题”的话题很多。并认为在这种情况下，小部件将是放置它的更合适的地方。

有人可以帮忙吗？

跨浏览器功能，用于表的水平滚动

0 个答案: