我正在尝试设置此自定义下拉菜单的样式
但是下拉的部分总是比下拉的“标题”部分略窄(每边1px)。
当我在这里改变宽度时,
.wrapper-dropdown-1 {
position: relative;
width: 200px;
padding: 10px;
margin: 0 auto;
}
似乎什么都没有发生。我怎样才能调整它,使下降的部分与顶部的宽度相同?这是在哪里控制的?在演示中,宽度似乎完美对齐,我无法理解我是如何更改样式来影响它的。
我正在尝试设置此自定义下拉菜单的样式
但是下拉的部分总是比下拉的“标题”部分略窄(每边1px)。
当我在这里改变宽度时,
.wrapper-dropdown-1 {
position: relative;
width: 200px;
padding: 10px;
margin: 0 auto;
}
似乎什么都没有发生。我怎样才能调整它,使下降的部分与顶部的宽度相同?这是在哪里控制的?在演示中,宽度似乎完美对齐,我无法理解我是如何更改样式来影响它的。
您是在其中一个元素中添加或删除边框吗?如果每边都有一个像素,这似乎是可能的原因。
您可以/应该匹配边框,或者,如果您可以失去一些跨浏览器兼容性,您可以使用box-sizing:
box-sizing: padding-box
(现在使用供应商前缀,例如-webkit-box-sizing: padding-box
)。
另一种(hacky)方法是将下拉列表设置为,margin-left
或者,等效地,从您的 JSBin 中,将/更改为:margin-right
-1px
left
right
-1px
.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -1px;
right: -1px;
/* ... */
}