使用CSS dreamweaver，导航栏不会向上移动，即使img位于顶部

Question

我在网站的左上侧有一个徽标图像，并希望我的导航显示在网站的右上侧。导航显示在页面的右侧，但它并没有与徽标平行，而是在下面，甚至认为徽标在左侧。你知道我在下面的代码中遗漏了什么吗，那就是阻止导航向上移动。

@charset 'UTF-8';
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
<!-- font-size: 1vw;>
background: white;
}
img { 
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
a, a:visited {
color: inherit;
}
header {
position: fixed;
padding: 1.5em;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.site-logo {
width: 30%;
max-width: 30%;
position: relative;
display: block;
}
.site-logo img {
width: 22em;
}
.logo {
opacity: 1;
}
.site-nav {
position: relative;
float: right;
z-index: 400;
top: 0;
left: 0;
display: block !important;
width: 68%;
padding: .75em 1em 0 0;
opacity: .95;
background: none;
}
.site-nav ul {
list-style-type: none;
margin: 0;
text-align: right;
}
.site-nav ul li {
display: inline-block;
margin-bottom: 0;
margin-left: 1.5em;
}
.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid black;
}

HTML

<header>
<!-- Logo -->
<a class="site-logo">
<img class="logo" src="images/SBI Logo.png" alt=""/>
</a>
<!-- Navigation Menu -->    
<nav class="site-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Rooms</a></li>
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Things To Do</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header> 

在此处输入图像描述

Answer 1

如果您在样式表中陷入困境，并且也使用EM，那么使用PIXELS而不是EM来定位元素会容易得多。

<style>
.mysitelogo
{
margin-top: 16px;
width: 458px;
height: 114px;
}
.mysitenav
{
float: right;
padding: 8px;
opacity: .95;
}
</style>

<header>
<!-- Logo -->
<img class="mysitelogo" src="logo.gif" alt="" />
<!-- Navigation Menu -->
<nav class="mysitenav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Rooms</a></li>
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Things To Do</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>

使用上面的代码，你可以得到你想要的布局，然后在样式表中微调你的布局。

有时，将更大的问题分解为基本部分更容易。

阅读本页以更好地理解EM的使用，它与FONT SIZE有关https://www.w3schools.com/CSSref/css_units.asp