使用float与inline-flex实现视图水平排列
需求
<view class="srk" style="border-bottom: 5rpx solid #e6e6e6;">
<text style="width: 40%;font-size: 30rpx;">主题名称</text>
<input type="text" class="inpt" v-model="ztmc"/>
</view>
将文字与输入框水平排列在同一行
初始效果:
文字与输入框错位。
**使用float与inline-flex进行更改
float
<view class="srk" style="border-bottom: 5rpx solid #e6e6e6;">
<text style="width: 40%;font-size: 30rpx;">主题名称</text>
<input type="text" class="inpt" v-model="ztmc" style="float:left;"/>
</view>
inline-flex
<view class="srk" style="border-bottom: 5rpx solid #e6e6e6;">
<text style="width: 40%;font-size: 30rpx;">主题名称</text>
<input type="text" class="inpt" v-model="ztmc" style="display:inline-flex;"/>
</view>