Debug-036-el-form横向表单-字段对齐的处理（2）

        问题描述：可以看下面的视频

横向表单-textarea

 

备注： 去年处理了一个和这个类似的问题，记录在另一篇文章中：

      （Debug-035-el-form横向表单-字段对齐的处理）

这次这个问题同样是我在使用el-form时使用的是“行内表单”，但是当某一个输入框的类型为type="textarea"时，人为手动去调整其高度时，这一行的其他输入框或者说是el-form-item位置会变化。那我希望这一行的元素可以是以上面对齐，这显然不太好看，位置会随时变。

---

（1）思路1（没成功）：监听textarea的高度变化，动态的去调整左侧输入框的高速，使二者保持一致

        这个思路是受到之前的那篇文章的影响，但是由于之前的图片是高度固定的，所以还是好实现的，但是这里高度不固定，所以我自然而然想到了监听的方法。但我没有找到合适的监听（addEventListener）手段。也可能是我技术太垃圾。

---

（2）思路2（成功）：CSS改样式

        上面的思路花了一点时间，我又观察了一下这个el-form-item的CSS元素，突然来了灵感。我发现左侧的元素虽然会随着textarea的高度变化，但是始终它都在居中的位置。果不其然，我找到了关键的一个CSS：

 

显而易见，将它改成top即可：

vertical-align：top

这样它就位于上方展示了，原来之前是由于vertical-align设置居中导致的。

伟大的CSS万岁！