html - css自定义下拉菜单上的宽度“匹配”

Question

我正在尝试设置此自定义下拉菜单的样式

但是下拉的部分总是比下拉的“标题”部分略窄（每边1px）。

当我在这里改变宽度时，

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

似乎什么都没有发生。我怎样才能调整它，使下降的部分与顶部的宽度相同？这是在哪里控制的？在演示中，宽度似乎完美对齐，我无法理解我是如何更改样式来影响它的。

jsbin

Answer 1

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

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

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

另一种（hacky）方法是将下拉列表设置为，margin-left或者，等效地，从您的 JSBin 中，将/更改为：margin-right-1pxleftright-1px

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

      /* ... */

}