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

Question

我有一个 CSS 汉堡包菜单，它应该显示在最大 525 像素的屏幕上。在这个尺寸之后，汉堡菜单应该变成一个普通的菜单，由 4 个链接组成， float 到页面的右侧，而 Logo float 到左侧。这是完整的代码: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( Logo )下方。

如何使 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;
}