时间戳

首页 > 解决方案 > 使用 CSS dreamweaver，导航栏不会向上移动，即使 img 位于顶部

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

问题描述

我在网站的左上方有一个徽标图像，并希望我的导航显示在网站的右上方。导航显示在页面的右侧，但不是与徽标平行，而是在其下方，即使徽标位于左侧。任何想法我在下面的代码中缺少什么阻止导航向上移动。

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

在此处输入图像描述

标签： csswebdreamweaver

解决方案

您在样式表中陷入困境并且也使用 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 https://www.w3schools.com/CSSref/css_units.asp

推荐阅读