CSS切换不浮动在右侧答案

【问题标题】：CSS Toggle not floating on right sideCSS切换不浮动在右侧
【发布时间】：2019-01-22 06:14:59
【问题描述】：

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

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

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

看看我的 CSS 的这一部分。

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

我的目标是让我的顶部导航栏菜单以移动/平板电脑形式出现在汉堡图标下方。在桌面模式下，我的菜单列表位于屏幕左侧，但当我在移动设备上时，右侧浮动不会将其余项目置于顶部导航栏下方。

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

因此，一旦您从浮动右侧删除 /**/ 注释并查看不同的结果，您就可以看到我在说什么。

【问题讨论】：

【解决方案1】：

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

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

}

【讨论】：

【解决方案2】：

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

【讨论】：

注意到屏幕截图中的不同图像。所以对于第一个链接Screenshot 1，它在第二个链接和第二个链接Screenshot 2 中的样式看起来有点奇怪。这就是我希望它的外观，但切换图标位于右侧而不是左侧。