【侧边导航栏出现时，不会紧贴着屏幕左边 _侧边栏】

侧边导航栏出现时，不会紧贴着屏幕左边

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

侧边栏

详细描述

截图

代码

@charset "UTF-8";
.cen-cen {
  display: flex;
  align-items: center;
  justify-content: center; }

.fixed-t {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10; }

.relative {
  position: relative; }

.absolute {
  position: absolute; }

.a-none {
  text-decoration: none; }

.a {
  width: 1rem; }

* {
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%; }

.main {
  padding: 4rem 8%;
  background-color: #F0F0F0; }

/*
    页头
*/
.header {
  height: 3rem;
  background-color: #29bde0; }

.la {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background: url("img7/BackIcon.png") no-repeat 0.5rem 0.7rem; }

/*
    侧边栏内容
*/
.cb {
  position: absolute;
  width: 80vw;
  margin-top: 3rem;
  transform: translateX(-100%);
  background-color: #fff; }

input[type="checkbox"]:checked ~ .cb,
input[type="checkbox"]:checked ~ .main {
  transform: translateX(80vw);
  transition: transform 0.4s ease; }

input[type="checkbox"] {
  display: none; }

/*
  内容
*/
.top-box {
  width: 100%;
  height: 5rem;
  background-color: #fff; }

.t-b-p {
  font-size: 1.8rem;
  color: #9a9a9a; }

.t-b-div {
  right: 0;
  width: 2rem;
  height: 3rem;
  background: url("img7/BackIcon.png") no-repeat left -3.5rem; }

/*
    捉鬼游戏
*/
.game {
  height: 4rem;
  margin-top: 1rem;
  font-size: 1.8rem;
  color: #fbb435;
  background-color: #fff;
  border-bottom: 1px solid #fbb435; }



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task7-1.css">
</head>
<body>
<!--
    页头
-->
<header>
    <div class="header fixed-t">
        <label for="menu" class="la"></label>
    </div>
</header>
<input type="checkbox" id="menu">
<ul class="cb">
    <li class="cb-gg">
        <img src="img7/laba.png">
        <p>公告</p>
    </li>
    <li class="cb-li"></li>
    <li class="cb-li"></li>
    <li class="cb-li"></li>
</ul>
<!--
    内容
-->
<main class="main">
<!--
    上次游戏：捉鬼猜词
 -->
    <div class="top-box cen-cen relative">
        <p class="t-b-p">上次游戏：捉鬼猜词版</p>
        <div class="t-b-div absolute"></div>
    </div>

<!--
    捉鬼游戏
-->
    <div class="game cen-cen">
        <p class="game-p">捉鬼游戏</p>
    </div>
    <div class="content relative">
        <a class="con-a cen-cen a-none" href="#">简化版</a>
        <p class="con-p cen-cen">有1133个用户正在玩此款游戏</p>
        <a class="con-a cen-cen a-none" href="#">猜词版</a>
        <div class="con-jt absolute"></div>
        <p class="con-p cen-cen">有1133个用户正在玩此款游戏</p>
        <a class="con-a cen-cen a-none" href="#">白痴版</a>
        <p class="con-p cen-cen">有1133个用户正在玩此款游戏</p>
        <div class="dot">
            <div class="dot-d"></div>
            <div class="dot-c"></div>
            <div class="dot-c"></div>
            <div class="dot-c"></div>
        </div>
    </div>
</main>
</body>
</html>

编辑于2024-11-17

时间排序

热门排序

[广州|内门弟子]JS-谢俊凯
0

给lable：position：absolute定位，
在点击绑定lable的时候为left：0或者right：0就行了我也是刚做这任务，给你个网址可以参考下，他是使用绝对定位脱离文档流通过负定位隐藏的
CSS实现侧边栏导航_前端_nic's blog-CSDN博客
https://blog.csdn.net/qq_34838643/article/details/71512413

查看全部>

编辑于2020-05-05

去第页