使用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>

将文字与输入框水平排列在同一行

初始效果：
image

文字与输入框错位。
**使用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>
posted @ 2022-06-30 13:44  又一岁荣枯  阅读(51)  评论(0)  编辑  收藏  举报