下拉菜單和下拉列表寬度不完全對齊

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;