el-select下拉错位（上）
最后更新于
最后更新于
大家能看出来他这块没对齐吗
大家看
就差几个像素
但是啊
同样是这个select这个就对齐了
那产生这个 bug 呀
他要同时满足三个条件
第一个呀
就是他要在这个el-form
的 item 里边去用 el-select
那第二个呢
就是他要给这个 el-select 加一个
这个poper-append-to-body = false
因为他默认是true
好这第二个
第三个呢
就是他给这个form设置了 label 的宽度
大家看 我把label宽度去掉
他现在也就能对齐了
大家看那
有人可能会怀疑跟宽度有关系啊
我们把它改大一点
比如改
大概400也是差一点（错位并没有扩大）
这个问题应该怎么解决呢
我们今天啊先说结论
那具体这个 bug 的来龙去脉
后边我会分两期视频
尽量简短详细的给大家解释一遍
那怎么解决呢
我们先找到这个 el-select
就这个
然后呢找到它的父极元素这个
e-form-item__content
大家看啊这有个 margin left
我们把这个 margin left 先去掉
然后我们再展开看看就对齐了
这是第一个方案啊
然后再撤回一下
第二个方案呢
就是还是改他
这里边有一个 position 等于 relative
我们把这个去掉
我们再展开
它也能对齐
所以呢解决这个问题啊
我们可以这样
我们在这定一个样式
比如就叫点 select
item 然后呢把刚才这个样式拿过来
我们呀先设置 margin 这种方式
我们把它设置成
然后呢
因为他那个是行内我们要加important
然后呢我们把这个样式应用在
设置了 append-body = false 的这个
（口误：应该是el-form-item里面）
好我们再来试一下啊
大家看 现在就对齐了
那有人说你把margin去掉了
会不会有问题
这个不会的啊
我把这个改小一点
比如说就
然后呢我让里边文字多一点
大家看，他也不会有问题
包括呢少点
都没有问题，也就是说
其实这个 margin-left 的是不影响的
这个我们后边会讲到哈
然后我们再说第二种方案
第二种方案就是把这块加一个 position
等于
把它改成这个initial初始值
然后这个不用加 important 的
我们再试一下
大家看，它也是对齐的