如何使移动菜单全宽答案

【问题标题】：How to make the mobile menu full width如何使移动菜单全宽
【发布时间】：2021-01-30 21:20:49
【问题描述】：

我正在尝试让移动菜单全宽，但似乎没有成功。

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

【问题讨论】：

【解决方案1】：

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

如果您希望 ul 中的主 li 水平放置在顶部，并且仅放置子项目，那么您需要弯曲 ul：

#menu-main-2 {
   display flex;
}

【讨论】：

【解决方案2】：

你可以使用width:100vw

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

【讨论】：

【解决方案3】：

如果你想让它占用完整的width，你应该试试这个：

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

【讨论】：