Html 内容上的转换不起作用

这是我使用的代码。按下导航栏菜单时，内容应向右移动，延迟0.7秒，与侧栏打开延迟0.7秒相同，但它不工作。 请检查代码并提出建议。 是因为我使用的媒体查询还是其他原因。？ 请检查代码并提出建议

*{ 填充：0； 保证金：0； 框大小：边框框； 字体系列：Arial、Helvetica、无衬线字体； } .标题{ 宽度：100%； 高度：70像素； 背景色：2f3640； 显示器：flex； 证明内容：中心； 对齐项目：居中； 位置：固定； } .标题img{ 宽度：60px； 高度：60px； 右边距：15px； } .标题h1{ 线高：70px； 颜色：fff； } .内容{ 边缘顶部：80px； 宽度：100； 填充：20px； 浮动：对； 过渡：所有0.7秒； } .内容img{ 宽度：100%； 最大宽度：700px； 显示：块； 保证金：自动； } .内容p{ 文本对齐：对齐； } .侧边栏{ 宽度：20%； 身高：100%； 位置：固定； 顶部：70像素； 背景色：353b48； 左-100%； 过渡：.7s； } .侧边栏{ 列表样式：无； } .侧边栏ul li{ 边框底部：2个实心rgba255、255、255、.1； } .侧边栏ul li a{ 显示：块； 文字装饰无； 颜色：fff； 字体大小：20px； 填充：15px 25px； 过渡：.4s； } 跨度{ 左边距：15px； } .侧边栏ul li a：悬停{ 左边框：10px纯白； } .社会{ 利润上限：200px； 显示器：flex； 对正内容：空间均匀； 对齐项目：居中； 字体大小：30px； 边框底部：2个实心rgba255、255、255、.1； 边框顶部：2个实心rgba255、255、255、.1； 填充：15px 25px； } 我{ 字体大小：30px； 颜色：fff； 过渡：.2s； } i:悬停{ 转换：scale1.2； 颜色：绿色； } .显示btn、.隐藏btn{ 字体大小：35px； 颜色：fff； 位置：固定； 顶部：15px； 左：50px； } chk{ 位置：绝对位置； 可见性：隐藏； z指数：-10； } .隐藏btn{ 不透明度：0； } chk:选中~侧栏{ 左：0； } chk:选中~显示btn{ 不透明度：0； } chk:选中~隐藏btn{ 不透明度：1； } chk:已选中。内容{ 宽度：80%； 浮动：对； 过渡：所有0.7秒； } @媒体最大宽度：768px{ .侧边栏{ 宽度：100%； 文本对齐：居中； } .侧边栏ul li a：悬停{ 左边框：30px纯白； } .标题h1{ 显示：无； } } 侧导航栏 满栈 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。

我更正了你的代码

此CSS转换无法完美工作，因为您正在使用侧栏和内容部分的不同CSS属性来显示此转换

当前您正在操作侧边栏的CSS属性为左-100%为0 c 因为这个问题

请管理CSS属性宽度：边栏的0%到20%，边栏在与内容部分相同的时间段内进行处理

* { 填充：0； 保证金：0； 框大小：边框框； 字体系列：Arial、Helvetica、无衬线字体； } .标题{ 宽度：100%； 高度：70像素； 背景色：2f3640； 显示器：flex； 证明内容：中心； 对齐项目：居中； 位置：固定； } .标题img{ 宽度：60px； 高度：60px； 右边距：15px； } .标题h1{ 线高：70px； 颜色：fff； } .内容{ 边缘顶部：80px； 宽度：100%； 填充：20px； 浮动：对； 过渡：所有0.7秒； } .内容img{ 宽度：100%； 最大宽度：700px； 显示：块； 保证金：自动； } .内容p{ 文本对齐：对齐； } .侧边栏{ 宽度：0%； 身高：100%； 位置：固定； 顶部：70像素； 背景色：353b48； 左：0； 过渡：所有0.7秒； 溢出：隐藏； } .侧边栏{ 列表样式：无； } .侧边栏ul li{ 边框底部：2个实心rgba255、255、255、.1； } .侧边栏ul li a{ 显示：块； 文字装饰无； 颜色：fff； 字体大小：20px； 填充：15px 25px； 过渡：.4s； } 跨度{ 左边距：15px； } .侧边栏ul li a：悬停{ 左边框：10px纯白； } .社会{ 利润上限：200px； 显示器：flex； 对正内容：空间均匀； 对齐项目：居中； 字体大小：30px； 边框底部：2个实心rgba255、255、255、.1； 边框顶部：2个实心rgba255、255、255、.1； 填充：15px 25px； } 我{ 字体大小：30px； 颜色：fff； 过渡：.2s； } i:悬停{ 转换：scale1.2； 颜色：绿色； } .显示btn、.隐藏btn{ 字体大小：35px； 颜色：fff； 位置：固定； 顶部：15px； 左：50px； } chk{ 位置：绝对位置； 可见性：隐藏； z指数：-10； } .隐藏btn{ 不透明度：0； } chk:选中~侧栏{ 宽度：20%； } chk:选中~显示btn{ 不透明度：0； } chk:选中~隐藏btn{ 不透明度：1； } chk:已选中。内容{ 宽度：80%； } @媒体最大宽度：768px{ .侧边栏{ 宽度：100%； 文本对齐：居中； } .侧边栏ul li a：悬停{ 左边框：30px纯白； } .标题h1{ 显示：无； } } 侧导航栏 满栈 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错。 洛雷姆·伊普斯姆·多洛·希特，一位杰出的圣徒，他是一位临时顾问 劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验 从一个普通的消费品中购买。在沃鲁帕特·维利特的《雷德亨德瑞特》中，两人或两人或两人 这是我的女儿。除非圣奥卡塔特无过失，必须 这是我的错

---

我在你的问题中更正了你的代码，你有一个关于你的结束元素，它工作正常不，你没有。。。正如我在问题中提到的那样，你只是在最后一句话里说了一下，@MaxiGui这个问题是关于“过渡”的。与关闭无关。更正后问题将无法解决。他需要操作我在回答中提到的CSS属性，转换在我的代码中运行良好。但如果你得到了他想要的，我没问题。我取消了我的否决票，因为你纠正了“li”。一个没有正确闭合的元素真的会产生波浪谢谢你。我感谢你@MaxiGui