Question

我正在使用纯CSS制作导航抽屉。一切正常，但是当汉堡包被点击时，容器不会让步。汉堡本身确实在移动。这是HTML：

<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <title>Home - BloNo Student Union</title>
</head>
<body>
    <ul class="navigation">
        <li><a href = "home.html">Home</a></li> 
        <li><a href = "about.html">About</a></li> 
        <li><a href = "campaigns.html">Campaigns</a></li> 
        <li><a href = "contact.html">Contact</a></li> 
    </ul>
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"></label>
    <div class = "container">
        ...
    </div>
</body>
</html>

这就是CSS：

.container {
padding-left: 15px;
padding-right: 15px;
width: 90%;
margin-left: 5%;
float: left;
overflow: auto;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2;
    width: 30px;
    height: 30px;
    cursor: pointer;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
    }

.nav-trigger:checked ~ .container {
    left: 215px;
}

.nav-trigger:checked + label {
    left: 215px;
}

似乎很简单，但它无法正常工作。再次，标签正在移动，但.container保持不变。有人可以帮忙吗？

提前致谢：）

Answer 1

您错过了position课程中的.container媒体资源，以及left

的工作原理

.nav-trigger:checked ~ .container {
    left: 215px;
}

更改为

.nav-trigger:checked ~ .container {
        left: 215px;
        position: relative;
    }

工作fiddle

CSS＆＃34;〜＆＃34;选择器不工作

1 个答案: