css - 使用 CSS Dreamweaver，导航栏不会向上移动以与顶部的 img 保持一致

Question

我在网站的左上角有一个 Logo 图像，并希望我的导航显示在网站的右上角。导航显示在页面的右侧，但不是与 Logo 平行，而是在其下方，甚至认为 Logo 位于左侧。知道我在下面的代码中缺少什么阻止导航向上移动吗。

   @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> 

enter image description here

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>

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

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

阅读此页面以更好地理解使用与 FONT SIZE 相关的 EM https://www.w3schools.com/CSSref/css_units.asp