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 个链接的包含 div 设为 display: inline-block，但它仍然占用 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 作为最后的手段使用，或者只有在您确定它是正确的用例时才使用。浮动是棘手的，除非你完全理解它，并且在大多数情况下有更好的方法来实现你的目标。

此外，我建议您看一看 flexbox for layouting purposes as well as css grid。后者现在只能在现代浏览器中运行（我认为 edge 仍然有问题，IE 没有也永远无法处理它）。

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

CSS hamburger menu doesn't transform correctly on a bigger screen

html

css

navbar

hamburger-menu