html - css 自定义下拉菜单的宽度为 "matching"

Question

我正在尝试设计 this custom dropdown menu

但下拉的部分总是比下拉列表的“标题”部分略窄(每边 1px)。

当我在这里改变宽度时，

.wrapper-dropdown-1 {
    position: relative;
    width: 200px;
    padding: 10px;
    margin: 0 auto;
}

似乎什么都没有发生。我该如何调整才能使下拉的部分与顶部的宽度相同？这是在什么地方控制的？在demo ，宽度似乎完美对齐，我不明白我是如何改变样式来影响它的。

jsbin

Answer 1

您要添加或删除其中一个元素的边框吗？如果每边各有一个 px，这似乎是可能的原因。

你可以/应该匹配边框，或者，如果你可以失去一些跨浏览器兼容性，你可以使用 box-sizing :

box-sizing:padding-box (现在使用供应商前缀，例如 -webkit-box-sizing: padding-box)。

另一种(hacky)方法是将下拉菜单的 margin-left 和 margin-right 设置为 -1px 或者，等效地，从您的 JSBin，将 left/right 更改为 -1px:

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

      /* ... */