Javascript 下拉菜单和下拉列表宽度未完全对齐

我不知道为什么我的下拉菜单和下拉列表的宽度没有完全对齐。我将它们的宽度都设置为：

width:300px

现在看起来是这样的：


这是我在
中的内容，因为您的
下拉列表
位于容器的内部
#dd
，如果父级应用了影响其宽度的任何css布局增强，如
边框
或
填充
等，其初始x轴将与父级不相同

要解决此问题，您必须通过在x轴上应用相应的负起点来抵消该
填充
或
边框
的影响

因此，只需对代码进行以下更改

.wrapper-dropdown-1 .dropdown {
   position: absolute;
   top: 100%;
   left: -1px; /* <--- This is the change */
   right: 0;
   background: white;
   list-style: none;
   font-weight: normal;
   opacity: 0;
   pointer-events: none;
   width: 300px;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   border-left: 1px solid black;
}

.wrapper-dropdown-1.下拉列表{
位置：绝对位置；
最高：100%；
左：-1px；/*如果您将
左：-1px；
添加到您的
.wrapper-dropdown-1.dropdown
样式，它的工作方式与它应该的一样。请参见下面添加的样式规则


.wrapper-dropdown-1.下拉列表{
/*大小和位置*/
位置：绝对位置；
最高：100%；
左：-1px；
右：0；< /代码>如果我的答案已经痊愈，请把它作为已接受的答案。你应得的。再次感谢。