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>