是否可以在固定菜单栏中找到汉堡包图标？
我试图将元素放在 body 标签中的 class="sidenav"中，但找不到图标。
span {
font-size: 30px;
cursor: pointer;
position: absolute;
}
/* Style the navigation bar */
.navbar {
width: 100%;
margin-left: 0px;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}<body>
<div id="main">
<span onclick="openNav()">☰</span>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
<a href="#">Login</a>
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</body>期待
现实
最佳答案
试试这个，我注意到您的代码有一些可以改进的地方，首先，您可以使用 Flexbox 很容易地将所有元素对齐在一行上；从导航图标中删除绝对位置，以便一切正常，这也让您删除 float 属性。然后您可以将您的链接包裹在另一个 div(或 ul 标记)中并使用 margin-left: auto
span {
font-size: 30px;
cursor: pointer;
}
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
display: flex;
align-items: center;
}
/* Navbar links */
.navlinks{
margin-left: auto;
}
.navbar a {
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}<body>
<div id="main">
<div class="navbar">
<span onclick="openNav()">☰</span>
<div class="navlinks">
<a href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
<a href="#">Login</a>
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</div>关于html - 为什么我的固定菜单在我的汉堡包图标下面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54413012/