Html CSS"~&引用；选择器不工作_Html_Css

Html CSS"~&引用；选择器不工作

html css

Html CSS"~&引用；选择器不工作,html,css,Html,Css,我正在使用纯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='

我正在使用纯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{
左侧填充：15px；
右侧填充：15px；
宽度：90%；
左缘：5%；
浮动：左；
溢出：自动；
}
.导航触发器{
位置：绝对位置；
剪辑：rect（0,0,0,0）；
}
标签[for=“导航触发器”]{
位置：固定；
顶部：15px；
左：15px；
z指数：2；
宽度：30px；
高度：30px；
光标：指针；
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
.nav触发器：选中~.container{
左：215px；
}
.导航触发器：选中+标签{
左：215px；
}

看起来很简单，但不起作用。再一次，标签在移动，但是.容器保持不变。有人能帮忙吗

提前感谢：）

您错过了

.container

类中的

位置

属性，那么它在

左侧的工作原理是什么
.nav-trigger:checked ~ .container {
    left: 215px;
}

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

工作
为其工作的容器添加位置
属性。