代码成就万世基积沙镇海,梦想永在凌云意意气风发|

又一岁荣枯

园龄:3年4个月粉丝:11关注:6

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

本文作者:又一岁荣枯

本文链接:https://www.cnblogs.com/java-six/p/16426595.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   又一岁荣枯  阅读(56)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起