我正在努力在 PicoCSS 中创建响应式汉堡菜单,如 this codepen 所示。在小型设备 (
width < 48em
) 上时,我希望弹出菜单的锚标记占据封闭的 & a {
display: block;
width: 100%;
}
但是,使用
100%
会导致几乎相反的情况发生……它可能只消耗 5% 的宽度,甚至导致文本自动换行。
因此,我必须接受以下改变:
& a {
display: block;
/* don't know why a "100%" breaks this */
width: 28em;
}
上面的创可贴几乎有效。如果我流畅地调整屏幕宽度,我可以看到菜单链接“悬停”或“选择”的小范围不足或超出范围,以及不需要的边距“折叠”。
我觉得如果只有
100%
设置能用那就最好了。知道为什么这不起作用吗?我想确保菜单选项可以“悬停”或在菜单的整个宽度上显示“选定”。
参考框架对于负边距 x 是错误的(现在的现代框架通常不会伪造这一点,但像 bootstrap 这样的旧东西会这样做)将其添加到
@media
:
& >ul.menu {
.item {
box-sizing: content-box;
}
& a {
display: block;
/* don't know why a "100%" breaks this */
width: 100%;
}
& a:hover {
background-color: yellow;
}
}
参考框架对于负边距 x 是错误的(现在的现代框架通常不会伪造这一点,但像 bootstrap 这样的旧东西会这样做)将其添加到
@media
:
& >ul.menu {
.item {
box-sizing: content-box;
}
& a {
display: block;
/* don't know why a "100%" breaks this */
width: 100%;
}
& a:hover {
background-color: yellow;
}
}