我正在尝试编辑网站,并将徽标与导航栏放在同一行。问题是,我的徽标隐藏在酒吧后面。我尝试使用float,但没有结果。两者的位置都很好,我只是不知道如何使徽标显示在导航栏的顶部。
.logo {
display: inline-block;
vertical-align: top;
width: 200px;
height: 50px;
float: left;
margin-left: 80px;
.navigation-bar > a {
float: right;
position: relative;
谢谢您的帮助!
答案 0 :(得分:0)
尝试使用此CSS和HTML代码
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
<div class="header">
<a href="#default" class="logo"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Cryptic Concepts" hight="10px" width="200px"/></a>
<div class="header-right">
<a href="Home.html">Home</a>
<a href="News.html">News</a>
<a class="active">About</a>
</div>
</div>
这是一个带有Google徽标的示例,我从W3 Schools获得了代码
看起来像这样