我目前正在学习网络开发,所以我正在练习一些 html 和 css。 我在将 Logo 放在左侧时遇到问题。 我希望完成的是这样的: prototype navigation
我的导航栏左侧有一个 Logo ,右侧是我的导航菜单主页、合作伙伴和产品,当屏幕宽度减小时,它们会变成汉堡菜单。
能否请您帮助我或指出一个好的资源来正确完成我的布局?提前谢谢大家。
这是我的 HTML 代码:
.menu {
margin: 0 30px 0 0;
background-color: #f8f5f2;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
.menu a {
text-decoration: none;
color:black;
margin: 0 10px;
line-height: 70px;
font-family: playfair-display
}
span {
color: dodgerblue;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 20px;
float: right;
}
#toggle {
display: none;
}
@media only screen and (max-width: 500px) {
label{
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
clear: right;
display: block;
border-bottom: 1px solid black;
margin: 0;
}
#toggle: checked + .menu {
display: block;
}
}
<header>
<div class="nav">
<div id="logo">
<img src="img/logoblackandred.png" alt="logo">
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
<a href="#">Home</a>
<a href="#">Partners</a>
<a href="#"><span>Products</span></a>
</div>
</div>
</header>
最佳答案
尝试
img{
display:inline;
width:70px;
height:50px;
float:left;
}
关于html - 在我的导航中添加我的 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44321774/