CSS:溢出-x:隐藏,溢出-y:在带有下拉列表的轮播中可见

时间:2017-07-04 13:22:30

标签: html css html5 css3 twitter-bootstrap-3

这是我的问题。我有一个像菜单一样的旋转木马。当标签数量高于浏览器上可用宽度的空间时,将显示轮播控件。一切正常。但我在每个标签上都添加了一个下拉菜单,这就是问题所在。如果我把溢出:可见,我们可以看到标签滑入和滑出div,这非常难看。

如果我把overflow:hidden,滑块工作正常,但是,我再也看不到我的下拉菜单,因为它们也是垂直隐藏的。我试图将overflow-y:visible和overflow-x:hidden设置为隐藏,但这不起作用,因为如果“x”可见,如果“y”不同,它将被视为自动。换句话说,我的滑块有效,但是添加了一个滚动条来显示我的下拉列表,这非常难看。

我在另一个帖子上看到它将它包裹在一个更大的容器周围,我只隐藏“x”,而我的“y”将回到更大的容器中。我不能这样做,因为如果没有维护结构,我的旋转木马会破裂。

所以我的问题是:我怎么能这样做我的滑块看起来不错(我们看不到标签滑入和滑出)以及我的下拉菜单出现了!

如果您要查看此链接,可以使用以下链接:https://decktogo.com/pages/downloads_user-manual_brochures

在大屏幕上,你不会看到任何错误。调整浏览器窗口的大小,使其宽度约为380像素。滑块将进入游戏状态,您将看到混乱。

如果您需要我的代码,您可以右键单击并检查我的网站页面以查看其中的所有代码。

感谢您的帮助, 乔纳森

1 个答案:

答案 0 :(得分:0)

问题解决了!不幸的是,它似乎没有一个很好的答案。所以我做了一个溢出-x:隐藏,以便我的旋转木马工作正常。为了解决下拉问题,我设置了一个高度:400px,边距为底部:-300px,这样可以获得所有预期的最终效果。令人遗憾的是,溢出-x和溢出-y不会以这种方式工作。



.download .carousel-inner.onebyone-carosel { 
  margin:0 40px;
  overflow-x:hidden;
  width: auto;
  height: 400px;
  margin-bottom:-300px;
  z-index: 4;
}

.download .carousel-inner{
  overflow: initial;
}