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

Question

我不知道为什么我的下拉菜单和我的下拉列表宽度不完美对齐。我同时设置其宽度为：width:300px;

它看起来像现在这样的权利：

这是我在JSFiddle

Answer 1

由于您.dropdown是容器#dd内，其初始x轴不会与父级相同，如果父级具有任何应用其宽度的css布局增强，如border或padding等。

要解决此问题，您必须通过在x轴上应用相应的负起点来抵消padding或border的影响。

所以，只需对您的代码进行以下更改即可。

.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; 
} 

Answer 2

如果添加left: -1px;您.wrapper-dropdown-1 .dropdown风格它的工作像它应该。参见下文的添加样式规则

.wrapper-dropdown-1 .dropdown { 
 
    
 
    /* Size & position */ 
 
    position: absolute; 
 
    top: 100%; 
 
    left: -1px; 
 
    right: 0;