Question

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

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

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

看看我的 CSS的这一部分。

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

我的目标是使手机或平板电脑的顶部导航栏菜单显示在汉堡图标的下方。在桌面模式下，我的菜单列表位于屏幕的左侧，但是当我在移动设备上时，向右浮动的不将其余项置于顶部导航栏下方。

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

从浮动右边删除/ ** /注释后，您可以看到我在说什么，并看到不同的结果。

Answer 1

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

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

}

Answer 2

hi，我未评论.label的float:right属性，它已正确对齐。.希望这是您想要的。谢谢