[van-dropdown-menu] 下拉菜单倒三角对不齐的优化方案

项目场景：

终端: H5

框架:

"vant": "^2.11.2",

"vue": "^2.6.11",

H5页面上使用van-dropdown-menu组件出现了样式错位的问题

1. 在文字溢出时出现样式问题,
2. 文字没有达到溢出的条件时没有问题
   

---

问题描述：

van-dropdown-menu组件文字溢出时中遇到的问题： 下拉菜单倒三角对不齐

---

原因分析：

倒三角的定位,是根据父级元素做的定位,父级元素的宽度受倒三角的兄弟元素的影响,倒三角的兄弟元素文字溢出时,导致倒三角的的位置也跟着变化

---

解决方案：

给倒三角的父级元素做网格布局（Grid） 代码如下:

.van-dropdown-menu {
  .van-dropdown-menu__item {
    justify-content: flex-start;
  }
  .van-dropdown-menu__title {
    display: grid;
    padding: 0;
  }
}