el-input设置宽度,el input宽度

　　有时，就像一个表单一样，页面的输入和选择宽度可能不一样，但有些可能长，有些可能短。本文介绍了如何通过元素来修改表单的el输入宽度和el选择宽度。有兴趣的可以了解一下。

　　既然用了element-ui，真的很好用。所有组件都可用，但组件之间的样式是固定的。有时，像表格形式，输入的宽度，选择等。的页面可能不一样，有的可能长有的可能短。这时候要改变这些控件的宽度就有点麻烦了。

　　看了网上很多文章，都找不到解决办法。他们很多都说给el-input加宽度，但是效果并不好。我们简单总结一下这个。

　　例如，我希望通过将描述和邮箱的宽度设置得更长来达到这种效果。

　　首先，在el-select中添加style="width: 500px "没有任何作用。为什么？因为在elment中控件的样式是固定的，所以在el-input中添加style=width:500px 会有效果，但是我觉得还是使用css样式优先，覆盖原元素的css比较好。

　　让我们调试页面，看看哪种css样式会影响宽度。你可以看到。El-forminline div . El-input固定为156像素

　　4.使用css的样式优先级，我们在当前页面上编写另一个自定义类。我们先定义一个当前页面的css，然后重写这个页面中的css，覆盖上一个页面样式，以免影响其他页面样式。

　　1.定义当前页面样式user_info_page，2。设置当前控件的样式。在样式的descClass样式中重写此el-select样式的宽度width。

　　您可以看到，经过此设置后，el-input或el-select的宽度变长了。

　　注意：

　　1.style lang=less 可以在css中设置css样式。

　　2.这里的宽度没有用百分比，会带来新的坑。屏幕小，页面可能会变形。百分比也可以(有空补)，但是可以把el-col的跨度设置大一点，优化布局，减少失真的可能。

　　这就是本文中关于通过元素修改表单的el输入宽度和el选择宽度的方法。有关修改El-输入宽度和El-按元素选择宽度的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。