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

【问题标题】：dropdown-menu and drop-down list width is not perfectly align下拉菜单和下拉列表宽度不完全对齐
【发布时间】：2015-04-01 04:20:29
【问题描述】：

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

现在看起来像这样：

这是我在JSFiddle 中的内容

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案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;
}

【讨论】：

如果我的答案已经痊愈，请将其设为可接受的答案。
你值得拥有。再次感谢。 :D

【解决方案2】：

如果您将left: -1px; 添加到您的.wrapper-dropdown-1 .dropdown 样式中，它的工作方式应该会正常。见下文添加的样式规则

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

【讨论】：