关于小程序中,设置了scroll标签, 不能使用display:flex属性,如何将其子元素水平排列
解决办法 使用disply:inline-flex, 子级开启了flex,对外是行内块元素, 对内是开启flex,也是行内块元素 <scroll-view class="navscroll" scroll-x="true"> <view class="b"> <view class="c"> <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image> </view> <text>随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水随时随地喝热水</text> </view> <view class="b"> <view class="c"> <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image> </view> <text>随时随地喝热水</text> </view> <view class="b"> <view class="c"> <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image> </view> <text>随时随地喝热水</text> </view> <view class="b"> <view class="c"> <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image> </view> <text>随时随地喝热水</text> </view><view class="b"> <view class="c"> <image src="https://yanxuan-item.nosdn.127.net/ea324a88d74978c5a11fe99ece5734ae.png" mode=""></image> </view> <text>随时随地喝热水</text> </view> </scroll-view>
stylus样式
注意,父级元素设置了white-space nowrap,不换行,子代元素文本标签会继承,需要设置成换行 .navscroll // 不换行 white-space nowrap // height 1000upx .b display inline-flex flex-direction column width 200upx .c image width 200upx height 200upx text font-size 24upx color #000 // 多行文本影藏 // 不换行,会继承父元素的不换行,我们需要单独设置换行 // white-space nowrap // 换行 white-space pre-wrap overflow hidden text-overflow ellipsis display -webkit-box -webkit-line-clamp 2 -webkit-box-orient vertical </style>