解决方法：scroll-view 内的 view 超出屏幕为何自动换行？

scroll-view 内的 view 超出屏幕后自动换行，根本原因在于 view 是块级元素（block），默认会独占一行。当多个 view 的总宽度超过容器宽度时，后面的 view 会被挤到下一行，而不是横向排列。

解决方法

要实现横向排列并支持横向滚动，需要同时做两件事：

阻止换行：给 scroll-view 添加 white-space: nowrap;

改变子元素显示方式：给内部的 view 设置 display: inline-block;

wxml代码：

<scroll-view scroll-x style="height: 200rpx; white-space: nowrap;">
  <view class="item">111</view>
  <view class="item">222</view>
  <view class="item">333</view>
  <view class="item">444</view>
</scroll-view>

css代码：

.item {
  display: inline-block;
  width: 220rpx;
  height: 200rpx;
  margin-right: 10rpx;
}

补充说明

如果你使用的是 flex 布局，也可以给 scroll-view 加上 display: flex; 并配合 enable-flex 属性（微信小程序），但要注意 flex 布局可能会让子元素自动平均分配空间，导致无法触发横向滚动，需要额外设置 flex-shrink: 0; 防止子元素被压缩。

scroll-view 开启横向滚动（scroll-x）时，必须设置固定高度，否则可能无法正常滚动。

如果是竖向滚动场景下内容换行，那属于正常行为，块级元素本身就会从上到下排列。

标签：空间程序css小程序