scroll-view横向滚动的时候，元素没有对齐

最新推荐文章于 2025-06-29 14:48:58 发布
原创 最新推荐文章于 2025-06-29 14:48:58 发布 · 1.9k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决小程序中scroll-view组件横滚时元素错位的问题，介绍正确的样式设置方法，包括父元素的宽度、overflow:hidden;white-space:nowrap;及子元素的display:inline-block;vertical-align:top;等关键样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

.scroll-view横向滚动的时候，包含文字图片等，元素错位，第二个元素掉下去；
hack：给子元素添加

vertical-align:top;



当使用scroll-view横向滚动时要注意几点：
父元素设置宽度，加上这两个样式overflow: hidden; white-space: nowrap;自元素设置成display: inline-block;vertical-align:top;

其他小程序坑和解决方案，请看：会会酱踩坑记录

小程序scroll-view简单使用,子元素换行在ios中出现子元素不换行问题,没有顶部对齐的问题;去除滚动条样式；子元素文字不换行
hangGe0111的博客
07-31 1077
1.代码 1.1.wxml <!-- 图片，横向scroll-x必须设置为true --> <scroll-view class='parentone' scroll-x="{{true}}"> <view class='sonone' style='background-color:red;'></view> <view cla...
小程序在IOS下，scroll-view组件内 子view排列错行，没在一条水平线上
qq_41981057的博客
01-19 920
在scroll-view组件内 子view加上vertical-align:top; 顶部对齐就可以了
2.2，零基础入门uni-app：scroll-view组件的横向与纵向滚动实战（咸虾米2.2）
最新发布
2201_75436433的博客
06-29 483
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。scroll-x：启用横向滚动scroll-y：启用纵向滚动scroll-top：设置竖向滚动位置：设置横向滚动位置横向滚动必须配合使用纵向滚动需要设置固定容器高度通过CSS可以优化滚动体验和视觉效果注意不同布局模式下子元素的显示方式。
【Android界面实现】解决ScrollView中嵌套Listview，Listview中嵌套Listview显示不完整和滑动冲突的问题
热门推荐
赵凯强
08-15 1万+
在一个滑动控件或者是布局里面，添加另外一个可以滑动的控件，通常会造成一些莫名其妙的问题。今天主要介绍在工作中遇到的，在ScrollView布局中嵌套Listview显示不正常，和在Listview中嵌套Listview的滑动冲突的问题。 1.ScrollView布局中嵌套Listview显示不正常的解决方案 目前来说，解决这个问题有好几种解决方案，这里只介绍其中两种比较简单易行的其中两种。
解决微信小程序中scroll-view横向滚动的问题
EnidChann的博客
09-01 476
解决微信小程序中scroll-view横向滚动的缺陷问题 需求: 在首页的vue文件中实现横向滚动, 书写代码如下 <div class="list"> <scroll-view class="scroll-view_H" scroll-x style="width: 100%"> // 元素内容 </scroll-view> </div&...
scrollview里面的页面元素往下掉automaticallyAdjustsScrollViewInsets
Clement_Gu的博客
07-13 603
在开发中遇到这样一个问题 就是在scrollview里的东西使劲往下拉 然后会掉下去大概一个导航条的高度。 而且在scrollview左右拖动的时候还会出现上下漂移的情况。 解决这种情况可以设置 self.automaticallyAdjustsScrollViewInsets = NO;//默认是YES 看一下官方文档： automaticallyAdjustsScrollView
unity scroll-view横向滚动
02-12
### 设置 Unity 中 ScrollView 组件实现横向滚动 为了使 `ScrollView` 支持横向滚动，在创建好基础结构之后，需调整几个关键属性。 #### 修改 Rect Transform 锚点 确保 `Scroll View` 和其内部的 `Viewport` 的...
微信小程序组件解读和分析：二、scroll-view（scroll-view可滚动视图区域组件）
程序猿大侠的博客
03-31 1030
scroll-view可滚动视图区域组件说明: 可滚动视图区域。 组件用法：纵向滚动用法 Tip: 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。 当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出） 当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）
详解微信小程序之scroll-view的flex布局问题
12-08
`scroll-view` 默认的滚动机制与 `flex` 布局的弹性伸缩特性可能存在冲突，导致元素不能按预期横向滚动。因此，若要在 `scroll-view` 中使用 `flex` 布局，需要通过增加一个额外的容器层来包裹内容，并将 `flex` ...
小程序 scroll-view 横向滚动 上下不对其 css bug
CJamenc的博客
02-08 434
.scroll-view横向滚动的时候，包含文字图片等，元素错位，两个元素横向不对其 hack：给子元素添加 vertical-align:top; 当使用scroll-view横向滚动时要注意几点： 父元素设置宽度，父元素添加: overflow: hidden; white-space: nowrap; 子元素添加属性 display: inline-block; vertical-align:top; 搞不懂这个cssbug什么原因, ...
抖音或微信小程序view在一排上css对齐问题
倔强的程序员的博客
10-26 1033
抖音或微信小程序上两行对齐问题 最近在开发抖音小程序发现view不能对齐（微信小程序也可以） 其实只用添加几行css即可解决，如下图片 .picker1 { /* padding: 19rpx 26rpx; */ background-color: #FFFFFF; padding: 10px; display: flex; justify-content: space-between; } ...
小程序scroll-view横向滚动失效，内容被压缩
weixin_42317515的博客
03-15 1651
用scroll-view做横向滚动时，给scroll-view设置了display：flex，子元素宽度固定，并且总长度超出scroll-view的宽度，但是发现滚动不了，并且子元素宽度被压缩了。 解决方法： 给scroll-view设置white-space: nowrap; 给子元素设置display: inline-block; <scroll-view class="scro...
uniapp中scroll-view横向滚动错乱,左右滑动样式错乱
weixin_48095278的博客
05-28 666
uniapp中scroll-view横向滚动错乱,左右滑动样式错乱
使用 scroll-view 标签，实现文字水平方向（从左至右）跑马灯效果
villen_t的博客
01-12 4045
微信小程序，使用 scroll-view 标签，实现文字水平方向（从左至右）跑马灯效果，目前暂无大BUG，已使用。 完整代码 //xml代码 scroll-view class="example"> view class="marquee_box"> view class="marquee_text" style="{{orientation}}:{{marqueeDista
【微信小程序】2 - 轮播图：swiper 、scroll-view 、flex
充电五分钟...
03-04 798
文章目录1、swiper2、scroll-view3、flex 注意： 点击微信开发工具右上角"详情" ,查看项目信息：本地代码的大小是不能超过2兆的（2兆就是2mb（兆字节） = 2048 kb（千字节），所以我们的大图片都不存本地，我们可以弄个在线库 或者弄个图片平台 微信里一般icon图标我们存在本地，图片我们不存本地，用线上的图片；如果一张图片很大，那下载这个图片时占据的内存很大，不存在...
PyQt教程：QScrollArea滚动区域的对齐属性
.
07-13 289
在PyQt中，QScrollArea是一个常用的窗口部件，它可以让我们在窗口内部创建一个可滚动的子窗口，显示大量内容时非常有用。在这个示例中，我们创建了一个垂直布局器，并在其中添加了10个标签。然后，我们创建了一个滚动区域，将对齐属性设置为居中对齐，并创建了一个容器部件，用来放置多个标签。运行程序后，我们可以看到所有的标签都被放置在了滚动区域中，并且由于对齐属性设置为居中对齐，它们默认居中显示。这样，我们就成功地使用了QScrollArea的对齐属性，在PyQt应用程序中创建了一个可滚动的子窗口。
使用display: inline-block;遇到的问题及解决
weixin_30558305的博客
12-10 575
1、使用display: inline-block;布局div会使两个字div中间产生间隙，解决办法有多种: ①可以不换行的将两个div书写在一行，因为换行也会占dom文档流。 ②可以在父元素中加上font-size: 0;也能消除中间间隙。 2、有些时候两个使用display:inline-block;的两个子元素可能会出现上下错位的情况，也就是没有上上部对齐，发生这种问题的原因是inli...
uniapp 横向滑动list（不同内容）分部问题:scroll-view，swiper overflow-x
qq_27909209的博客
06-06 4128
试过一些设置，目前无法通过直接设置让它顶端对齐，并且高度一致。所以如果非要用这个，可以通过辅助方法：自己设置list里面的内容让内容条数相同，并且自己设置的内容可以设置颜色及背景，即可达到视觉对齐效果。横向的话：内容高度一致，（如果不一致的话，scroll-view会自动以底部对齐，形成山峰状，看下图）除了官网说的scroll-view的 横向，纵向，横线滑动，这里遇到一些问题写一下，如果要使用scroll-view也很简单，必备三要素。1：scroll-x或者scroll-y。或者使用swiper。
微信小程序scroll-view横向滚动显示不全，及子元素纵向排列问题
weixin_42826294的博客
06-25 4350
一句话，scroll-view的子元素要inline-block，父元素white-space: nowrap;就可以横向排列。但是这个时候，子元素有最后一个元素有可能是显示不全的，需要在scroll-view加上overflow: scroll;。就可以完美解决问题，直接上代码吧。本人亲自踩此坑，如有帮助，请点赞哦，好用不点赞就是耍流氓，哈哈，白嫖。 <view class="title-con"> <view class="conclude-title">
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值