如何使移动菜单全宽

Question

我试图让移动菜单全宽，但似乎不成功。

#menu-main-2 {
background-color:#FFFFFF !important;
padding-left:15px;
max-width: unset;
width: 100%;
}

移动菜单

Answer 1

它看起来已经是父容器的最大宽度了吗?如果你需要它紧靠边缘，你需要增加容器的宽度或position absoluteul，然后相对于容器的位置。

如果你想让ul中的主li在顶部是水平的，只有子项目是下降的，那么你需要弯曲ul:

#menu-main-2 {
display flex;
}

Answer 2

可以使用width:100vw

视窗宽度(vw) -整个视口宽度的百分比。10vw将解析为当前视口宽度的10%，或者在480像素宽的手机上解析为48像素。%和vw之间的区别与em和rem之间的区别最为相似。% length是相对于本地上下文(包含元素)的宽度，而vw length是相对于浏览器窗口的全宽度。

Answer 3

如果您想要完整的width，您应该试试这个:

#menu-main-2 
{
position: absolute;
top: 2rem;
right: 0;
bottom: 0;
left: 0;
}