CSS 汉堡菜单在更大的屏幕上无法正确转换

Question

我有一个 CSS 汉堡菜单，它应该在最大 525 像素的屏幕上显示。在这个大小之后，汉堡菜单应该变成一个普通菜单，由 4 个链接组成，浮动到页面的右侧，而徽标浮动到左侧。以下是完整代码：https://codepen.io/Cilvako/pen/zjvBrE

<div class="nav">

         <h1>Zero Gravity</h1>

         <label for="toggle">&#9776</label>

         <input type="checkbox" id="toggle"/>

       <div class="menu">
           <a href="#">About Us</a>
           <a href="#">Contact</a>
           <a href="#">Blog</a>
           <a href="#"><span>Free Trial</span></a>
       </div>

    </div>

虽然我制作了 4 个链接 display: inline-block 的包含 div，但它仍然占据了 div 的整个宽度，显示在 h1（徽标）下方。

如何使 h1 和菜单 (.menu) 彼此相邻显示，具有相同的高度？我真的没主意了。

Answer 1

试试这个

CSS

@media only screen and (min-width: 525px)
.menu {
    text-align: right;
    display: inline-block;
    float: right;
    width: auto;
    clear: none;
}

Answer 2

实际上，在这种情况下，罪魁祸首很明显：在 .menu 选择器上都与 width: 100% 一起。

你应该去掉 width: 100% 并且你可以使用 clear: right （这就是你应该做清除的地方）。

我建议完全删除浮动（从 .menu 中删除 float:left、clear:both 和 width:100% 并从媒体查询 .menu 中删除 float:right。这种方式效果很好。

事实上，使用 float 作为最后的手段，或者只有在您确定它是正确的用例时才使用。 Float 很棘手，除非您完全理解它，并且在大多数情况下有更好的方法来实现您的目标。

我还建议您查看flexbox 以进行布局以及css grid。后者目前仅适用于现代浏览器（我认为 edge 仍然存在问题，IE 没有也永远无法处理它）。