Question

当我单击链接到复选框的汉堡菜单时，导航菜单的左侧必须为8rem。但是该属性不起作用。为什么？

https://codepen.io/noelkurian/pen/dQmbpK

<!DOCTYPE html>
<html lang="en">
<!--header-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Furniture Shop </title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,800" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/brands.css" integrity="sha384-QT2Z8ljl3UupqMtQNmPyhSPO/d5qbrzWmFxJqmY7tqoTuT2YrQLEqzvVOP2cT5XW" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css" integrity="sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT" crossorigin="anonymous">
</head>

<body>
  <!--navbar-->
  <div class="navbar">
    <input type="checkbox" class="checkbox" id="click" >
    <div class="sidebar">

       <label for="click">
        <div class="menu-icon">
          <div class="line line-1"></div>
          <div class="line line-2"></div>
          <div class="line line-3"></div>
      </label>
    </div>

2018年

.navigation-header {
  position: fixed;
  left: 8rem;
  height: 100%;
  background: linear-gradient(to top, rgba(170, 170, 161, 0.8), rgba(166, 166, 166, 0.8)), url(../img/nav-bg.jpeg) center no-repeat;
  width: 40rem;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: all .3s ease-in-out;
}

.checkbox:checked  ~ .navigation-header{
left:8rem;
}

链接到该复选框的汉堡菜单不会滑动导航栏

0 个答案: