layout布局input框输入中文出现撑开/换行

layout布局input框输入中文出现撑开/换行


问题

  • element ui组件库中提供了layout布局,但是在使用中出现了一个奇奇怪怪的问题

  • 我想要实现的布局是两个输入框排成一行,行与行之间样式布局不会互相影响
    在这里插入图片描述

  • 直接上代码:

<el-row :gutter="10">
  <template v-for="item in list">
    <el-col :span="12">
		<el-input></el-input>
    </el-col>
  </template>
</el-row>
  • 输入文字后输入框出现间隙,内容不紧凑,有时会出现换行现象
    在这里插入图片描述

解决

  • 我尝试去调整间距,padding,margin,norwarp来实现不换行和不撑开,但是都无济于事,最后通过反复验证发现了原因
  • 在使用 el-col 布局时,输入中文时出现撑开或换行,可能是因为中文字符的宽度与英文字符不同,导致布局出现问题
  • 此时需要更灵活的布局方式,可以使用flexbox或grid布局来实现。以下是一一些使用flexbox布局的代码示例:
<el-row :gutter="10" style="display: flex; flex-wrap: wrap;">
	<template v-for=" (item,index) in list">
		<el-col :span="12" style= "flex-basis: 50%;">
			<el-input></el-input>
		</el-col>
	</ template>
</el-row>
  • 在这个示例中,在: e1- row组件中添加了 display: flex; 和flex-wrap: wrap;样式,以使用flexbox布局。我们还在每个el-col组件中添加了 flex-basis: 50%;样式,以使它们每行显示两个。
  • 此外还有更加便捷的解决方案,因为输入中文字符宽度太大导致样式出现问题,所以可以直接把el-input的框的大小进行一个改变,直接给el-input设置size="medium"属性或者size="large"也能得到解决。
<el-row :gutter="10">
  <template v-for="item in list">
    <el-col :span="12">
    	<el-input size="medium"></el-input>
		<!--<el-input size="large"></el-input>-->
    </el-col>
  </template>
</el-row>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会思想的苇草i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值