如何在Materialize CSS中修改Carousel Item的宽度？已成功调整高度

嘿，我帮你搞定这个问题！首先得说，你遇到的情况挺常见的——Materialize的Carousel组件默认会通过JavaScript给.carousel-item设置内联样式宽度，而且你代码里还嵌套了两层.carousel容器，这也会打乱样式优先级，导致你改宽度没效果。咱们一步步来解决：

第一步：修正HTML结构 #

你现在的代码里嵌套了两个.carousel div，这是多余的，Materialize只需要一层外层容器包裹.carousel-item就行，先改成这样：

<div class="carousel z-depth-5">
  <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
</div>

第二步：用CSS覆盖默认样式 #

因为Materialize的JS会给.carousel-item加内联宽度，所以咱们需要提高自定义样式的优先级，直接覆盖它：

/* 先调整carousel容器的基础样式，避免限制子项 */
.carousel {
  width: auto; /* 或者设置你想要的容器总宽度 */
  overflow: visible; /* 可选，如果你希望item能超出容器范围 */
}

/* 强制覆盖carousel-item的默认宽度和高度 */
.carousel .carousel-item {
  width: 300px !important; /* 这里替换成你想要的宽度值 */
  height: 300px; /* 保持你已经设置好的高度 */
}

/* 让图片自适应item的尺寸（可选，保持图片比例） */
.carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 防止图片拉伸变形 */
}

小提示：不用!important的替代方案 #

如果你不想用!important，可以给外层carousel加一个自定义类，用更高优先级的选择器来覆盖：

<!-- HTML里加自定义类 -->
<div class="carousel custom-carousel z-depth-5">
  <!-- 子项内容 -->
</div>

/* 用自定义类提高优先级 */
.custom-carousel .carousel-item {
  width: 300px;
  height: 300px;
}

不过要注意，如果Materialize的JS还是给item加了内联宽度，这个方法可能失效，这时候!important还是最稳妥的选择。

最后检查 #

确保你的自定义CSS是在Materialize的官方CSS之后加载的，这样你的样式才能覆盖默认样式哦！

内容的提问来源于stack exchange，提问作者arunoday singh