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>

---