首页 新闻 赞助 找找看

小程序中不换行

0
悬赏园豆:15 [已解决问题] 解决于 2020-03-26 14:09

<block class="hx" wx:for="{{array}}" wx:for-item="item">
<view class="list">
<view class="img">
<image src="{{item.good_image}}"></image>
<view class="text">{{item.good_text}}</view>
</view>
</view>
</block>

js
data: {
array:[{
good_text:"慢性病",
good_image:'http://i2.tiimg.com/710528/fd976d20e6433530.png'
},{
good_text: "慢性病",
good_image: 'http://i2.tiimg.com/710528/fd976d20e6433530.png'
}]
},

css
.list image{
width: 30px;
height: 30px;
}
.img{
text-align: center;
display: inline-block;
}
.text{
font-size: 13px;
}
.list{
width: 100%;
}

小白萝卜呀的主页 小白萝卜呀 | 初学一级 | 园豆:4
提问于:2020-03-23 12:50
< >
分享
最佳答案
1

可以写css养式,image:display: inline-block;
块级元素变行级元素;
实在控制不了可以使用fle布局

收获园豆:15
Saunterer | 初学一级 |园豆:140 | 2020-03-23 15:32

您说的这个我已经试过了,没用,换行的话good_image一直无法上去

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-23 15:34

@小白萝卜呀: 会不会是你把它的父容器img设置的宽度不够?

Saunterer | 园豆:140 (初学一级) | 2020-03-23 15:36

@Saunterer: 我宽度删除后也是一样的

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-23 15:36
@小白萝卜呀: 你把block改成view,然后把这个view加一个class,把这个view加css样式:display: inline-block;
Saunterer | 园豆:140 (初学一级) | 2020-03-23 15:52

@Saunterer: 谢谢指导,我已经弄好了,我也是按照您的这个去做的,我换成flex弹性布局就可以了

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-23 15:54

@Saunterer: <view class="txbj">
<view class="hx" wx:for="{{array}}" wx:for-item="item">
<view class="list">
<view class="img">
<image src="{{item.good_image}}"></image>
<view class="text">{{item.good_text}}</view>
</view>
</view>
</view>
</view>

最外层的.txbj 加一个display:flex;就解决了

小白萝卜呀 | 园豆:4 (初学一级) | 2020-03-23 15:55

@小白萝卜呀: 好的

Saunterer | 园豆:140 (初学一级) | 2020-03-23 15:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册