<view style="margin: 10px;"> <text style="white-space: pre-wrap;font-size: 25px;color: #e4dc6c;">{{item.num.toFixed(2)}}</text> <view style="width: 90px;"> <button>提现</button> </view> <view> <text style="color: #e4dc6c;font-size: 10px;">1星币可兑换¥1</text> </view> </view>让提现和<text style="white-space: pre-wrap;font-size: 25px;color: #e4dc6c;">{{item.num.toFixed(2)}}</text>显示在同一行
时间: 2024-03-16 15:46:25 浏览: 79
使用font-size:0 来去掉inline-block元素之间的空隙方法
您可以这样修改代码:
```html
<view style="margin: 10px;display:flex;align-items:center;">
<text style="white-space: pre-wrap;font-size: 25px;color: #e4dc6c;margin-right:10px;">{{item.num.toFixed(2)}}</text>
<button style="margin-right:10px;">提现</button>
<text style="color: #e4dc6c;font-size: 10px;">1星币可兑换¥1</text>
</view>
```
这样就可以让提现按钮和数字显示在同一行了。使用了 `display: flex` 和 `align-items: center` 来实现横向对齐。另外,为了让数字和按钮之间有一定的间距,我在数字后面加了一个 `margin-right:10px` 的样式。
阅读全文