小程序中不换行
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%;
}
最佳答案
1
可以写css养式，image：display: inline-block;
块级元素变行级元素；
实在控制不了可以使用fle布局
收获园豆：15
您说的这个我已经试过了，没用，换行的话good_image一直无法上去
@小白萝卜呀: 会不会是你把它的父容器img设置的宽度不够？
@Saunterer: 我宽度删除后也是一样的
@小白萝卜呀: 你把block改成view，然后把这个view加一个class，把这个view加css样式：display: inline-block;
@Saunterer: 谢谢指导，我已经弄好了，我也是按照您的这个去做的，我换成flex弹性布局就可以了
@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;就解决了
@小白萝卜呀: 好的
