我无法在导航栏的左侧显示我的徽标。它只是出现在中间，导航菜单向下移动。请您能帮我解决它并了解我做错了什么？
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylecafe.css">
</head>
<body>
<div id="contacttop">
<div id="contacttop2">
<div id="phoneemail">
<p><span id="phone">☏</span> 012240478624 <span id="envelope">✉</span> <a href="#">admin@coffeehouseabz.com</a></p>
</div>
<div id="socialmedia">
<a href="#"><img src="img/instagram.png" width="16px" height="16px"></a>
<a href="#"><img src="img/googleplus.png" width="16px" height="16px"></a>
<a href="#"><img src="img/facebook.png" width="16px" height="16px"></a>
</div>
</div>
</div>
<div id="navwrap">
<nav>
<a href="index.html" id="logo"></a>
<!--<img src="burger.png">-->
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="tout.html">Google Tour</a></li>
<li><a href="menu.html">Menu ▼</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="whatson.html">What's On</a></li>
</ul>
</nav>
</div>
<div id="banner"></div>
<section id="info"></section>
<section id="contactbot">
<form></form>
<div id="hours"></div>
</section>
<footer></footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
/*--- css reset ---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*--- end css reset ---*/
a {
color: black;
text-decoration: none;
}
body {
font-family: 'Open Sans', sans-serif;
}
#contacttop {
width: 100%;
background: #f2e8c1;
}
#contacttop2 {
width: 80%;
height: 30px;
background: #f2e8c1;
margin: 0 auto;
}
#phoneemail {
width: 50%;
float: left;
}
#phoneemail p {
font-size: .75em;
font-weight: 600;
line-height: 30px;
}
#phone, #envelope {
font-size: 1.3em;
}
#socialmedia {
width: 90px;
height: 30px;
float: right;
}
#socialmedia img {
display: block;
margin: 7px 0 7px 14px;
float: right;
}
#navwrap {
width: 100%;
background: #663200;
height: 90px;
}
nav {
width: 80%;
margin: 0 auto;
height: 90px;
}
#logo {
background: url(../img/logo.png) no-repeat;
width: 126px;
height: 75px;
margin: 7.5px 0;
float: left;
}
nav ul {
float: right;
}
nav ul li {
display: inline;
margin-left: 30px;
line-height: 90px;
}
nav ul li a {
font-size: 1.1em;
color:#dddddd;
font-weight:600;
}
#current {
color: white;
}
我希望您想要的。使用位置属性而不是浮点。由于您使用的是背景图像，因此Float不起作用。
因此，使用位置元素。有必要使用
位置：相对;
对于元素的母体，有助于将元素保持在父的范围内。
nav {
width: 80%;
margin: auto;
height: 90px;
position: relative;
}
#logo {
background: url(../img/logo.png) no-repeat;
width: 126px;
height: 75px;
margin: 7.5px 0;
border: 1px solid red;
position: absolute;
left: 0px;
}
nav ul {
overflow: auto;
padding: 0;
margin: 0;
}
nav ul li {
float: left;
display: inline;
margin-left: 30px;
line-height: 90px;
}