设置旋转木马的样式，使其左对齐(在容器中)以到达屏幕的右侧(在容器之外)

Question

我在Nuxt/Vue应用程序的容器中得到了一个flickity-carousel (用于居中/对齐目的)。我希望旋转木马在左侧与我的其余内容对齐，但我希望旋转木马一直到屏幕的右边。我正在使用Tailwind进行样式设置。

<div class="container mx-auto mx-10">
  <Content_A />
  <content_B />
  <Carousel class="???"/>
</div>

这就是我目前所拥有的

​

​

这就是我想要的

​

​

在尝试了overflow-x-visible和其他顺风类之后，我还没有做到这一点。如果有人知道怎么做，请帮帮我!！

Answer 1

看起来可能有几个原因导致这个方法对你不起作用。

1. 容器正在使用overflow-x: hidden防止水平溢出。无论问题来自何处，您都需要确保容器允许水平溢出。

由于overflow-x: hidden和width: 100%，

1. 转盘不允许水平溢出。可以将水平溢出更改为width: auto; min-width: 100%;.

或将overflow-x: visible更改为width

检查转盘中每个div上的样式也是值得的，因为如果顶级Carousel组件和转盘项目本身之间有几个元素，问题可能来自转盘中的一个或多个地方。