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选择器上的宽度和宽度均为100％。

您应该摆脱宽度：100％的限制，然后可以使用clear：right（这是您要进行清除的位置）。

我建议完全删除浮动元素（从.menu移除浮动元素：向左，清除：宽度和宽度：100％，并从媒体查询.menu中移除浮动元素：向右。这样很好地工作。

实际上，将float用作最后的手段，或者仅在您确定这是正确的用例时使用。 除非您完全理解浮动，否则浮动是棘手的，在大多数情况下，有更好的方法可以实现目标。

我也建议您看看flexbox以及CSS网格 。 后者现在只能在现代浏览器中工作（我认为edge仍然有问题，IE永远不会也将无法处理它）。