Question

我有一个CSS汉堡菜单，应该在最大525px的屏幕上显示。在这个尺寸之后，汉堡包菜单应该转换为普通菜单，由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

实际上，在这种情况下，罪魁祸首很明显：两者都是宽度：100％on .menu选择器。

你应该摆脱宽度：100％，你可以使用clear：right（那就是你想要清空的地方）。

我建议完全删除浮点数（删除float：left，clear：both和width：100％来自.menu并从媒体查询中删除float：right。菜单。它很好地工作。

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

另外，我建议您查看flexbox以进行布局以及css grid。后者现在只在现代浏览器中工作（我认为边缘仍然存在问题，IE没有，并且无法处理它。）

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

2 个答案: