Question

我的网站桌面版本有侧面导航。这是CSS：

.sidenav {
  position: fixed;
  /*width set by col2 [16.66%]*/
  height: 100%;
  left: 0;
  /*top set by $*/
  background-color: #2e2e2e;
}

移动网站侧面导航的CSS：

.sidenav {
  width: 0;
  height: 100%;
  position: fixed;
  right: 0;
  z-index: 1;
  background-color: #2e2e2e;
  overflow-x: hidden;
  -webkit-transition: 1s;
  transition: 1s;
  padding-top: 15px;
}

正如您从CSS中看到的那样，我试图让侧窗在移动窗口的右侧。它仍然在左边。我错过了什么？我有重复的设置，因为我试图从桌面版本重置它们。我想只需将right:0添加到@media就可以使它成为页面的整个宽度。

Answer 1

您需要取消设置right的{{1}}属性才能应用：

@media (/*...*/) {
  .sidenav {
    left: auto;
    right: 0;
    /*...*/
  }
}

Answer 2

只需为移动sidenav样式添加此规则：

.sidenav {
  left:auto;
}

重点是浏览器在您的版本中有两个规则 - left: 0和right: 0，因此，他会听取第一条规则并向左移动。

根据屏幕宽度将侧导航向右移动

2 个答案: