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

会思想的苇草i

已于 2023-12-02 15:12:29 修改

阅读量1.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：开发之旅文章标签： vue.js javascript 前端 elementui flex

于 2023-04-20 09:43:54 首次发布

本文链接：https://blog.csdn.net/ASHIYI66/article/details/130219121

开发之旅专栏收录该内容

6 篇文章

订阅专栏

在ElementUI的layout布局中，当输入中文时输入框可能出现撑开或换行。这是因为中文字符宽度与英文字符不同导致的。文章提供了解决方案，包括使用flexbox布局和调整el-input的size属性，以确保输入框能正确并排显示且不受中文字符宽度影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>