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

Question

我不确定为什么我的下拉菜单和下拉列表宽度不完全对齐。我将它们的宽度都设置为：width:300px;

现在看起来像这样：

这是我在 JSFiddle

中的内容

Answer 1

由于您的 .dropdown 位于容器 #dd 内，如果父级应用了任何 css 布局增强功能，其初始 x 轴将不会与父级相同这会影响其宽度，例如 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;

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

dropdown-menu and drop-down list width is not perfectly align

html

javascript

css

jquery

drop-down-menu