现象:在为Menu组件添加样式时发现,当我点击某个tab时父元素的高度会撑开,原因是boder-bottom设置为2px,第一反应是将border-sizing设置为border-box,使得width
和height
属性包括内容,内边距和边框,但不包括外边距。但是无效,因为我没有为父元素设置宽高。
1655864862453
.menu{
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 30px;
list-style: none;
border-bottom: $menu-border-width solid $menu-border-color;
box-shadow: $menu-box-shadow;
>.menu-item {
padding: $menu-item-padding-y $menu-item-padding-x;
cursor: pointer;
transition: $menu-transition;
&:hover, &:focus {
text-decoration: none;
}
&.is-disabled {
color: $menu-item-disabled-color;
pointer-events: none;
cursor: default;
}
&.is-active, &:hover {
color: $menu-item-active-color;
border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
}
}
}
解决:换一种方法解决,在menu-item添加border-bottom的样式与点击时的样式一样,但颜色设置为transparent就行!
>.menu-item {
padding: $menu-item-padding-y $menu-item-padding-x;
cursor: pointer;
transition: $menu-transition;
border-bottom: $menu-item-active-border-width solid transparent;
&:hover, &:focus {
text-decoration: none;
}
...
1655865242469