CSS 切换不浮动在右侧

Question

好的，所以我正在尝试为我的网站制作响应式导航菜单。我目前无法使这个 dang float 属性工作。因此，我结合了 https://www.w3schools.com/ 和 YouTube 教程来制作我设想的网站。

这是我到目前为止得到的（Link 我的代码在下面的 JS 超链接中 Fiddle）

因此，如果您实际查看媒体和屏幕部分下的标签属性，其中像素的最大宽度开始。

看看我的这部分CSS.

label {
   display: block;
   cursor: pointer;
   /* float: right; */
}

我的目标是让我的顶部导航栏菜单在 mobile/tablet 形式时显示在汉堡包图标下方。在桌面模式下，我的菜单列表位于屏幕左侧，但在移动设备上，右侧浮动不会将其余项目带到顶部导航栏下方.

这就是我想要做的事情https://youtu.be/xMTs8tAapnQ?t=611（视频在中跳到 10 分 11 秒）

因此，一旦您从浮动右侧删除 /**/ 评论并看到不同的结果，您就会明白我在说什么。

Answer 1

您好，我取消了对 .label 的 float:right 属性的注释，它向右对齐。希望这就是您要查找的内容。谢谢

Answer 2

您必须将 overflow:hidden 添加到菜单，以便顶部导航栏菜单显示在汉堡包图标下方看到这个 https://jsfiddle.net/dow2qLck/1/

.menu {
overflow:hidden;
text-align: center;
width: 100%;
display: none;

}

CSS Toggle not floating on right side