Question

我正在尝试通过id= "nav-bar"将float:right文本对齐标题的右侧。左侧的徽标位于float:left上，并且沿标头父元素的绝对位置。这些都不起作用。我尝试为id=nav-bar使用clearfix，但是它不起作用。知道如何解决这个问题吗？请帮忙。请参见下面的代码。

<style>
    html,body{
      font-family: 'Open Sans',sans-serif;
      text-align: center;
    }

    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      
    }

    #page-wrapper {
      position: relative;
    }

    #header {
    position: fixed;
    top: 0;
    left: 0;
    height: 125px;
    }

       .logo {
    float: left;
    }

  #header-img {
    height:100%;
  }

    nav {
      position: relative;
      float: right;
     height: 10vh;
     color:blue;
      }

    li {
      display: inline-block;
      list-style: none;
     
    }

    a {
      color: #000;
      text-decoration: none;
    }





</style>
<!DOCTYPE type>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
  <body>
    <div id="page-wrapper">
     <header id="header">
      <div class="logo">
       <img id="header-img" src="http://image.discountsoff.com/dryKPIu3fpLUjodbv1n2Q2EWdkA=/logos/aersf.com.png">
        </div>

          <nav id="nav-bar">
            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#products">Products</a></li>
              <li><a class="nav-link" href="#about us">About Us</a></li>
            </ul>
          </nav>
     </header>
      
        
        
        <div class="container">
          <section id="features">
            <div class="grid"></div>
              <img class="lock feature" src="file:///F:/Coding/Product%20Landing%20Page/lock%20feature.svg" alt ="features"></img>
              <div class="description"><h2>Lock Feature<h2><p>Aer started in 2014 as a crowdfunding project that combined a gym bag and an office bag into one simplified design. That project has grown into a mission to simplify the way you carry so you can worry less about what's on your back and focus more on what's ahead. Whether you're traveling between the office and the gym, or from San Francisco to Tokyo, there's a bag in our collection that's perfectly suited for your journey.</p></div>
                
         
             <div class="icon-bag"></div>
              <img class="zip feature" src="file:///F:/Coding/Product%20Landing%20Page/zip%20feature.svg" alt="full bag"></img>
              <div class="description"><h2>Zip Feature</h2><p>The Active Collection is a line of modern gym/work bags designed for the city professional. Go from the office to the gym and everywhere in between.</p></div>
              
        
              <div class="grid"></div>
                <img class="lap top feature" src="file:///F:/Coding/Product%20Landing%20Page/lap%20top%20feature.svg" alt="about us"></img>
                <div class="description"><h2>Lap Top Feature</h2><p>Inspired by the city, we create minimalist bags that balance smart features with a clean, architectural style.</p></div>
          </section>      
        </div>

            
                
                
       
          
        
        
        
        <div class="container">
          <section id="products"></section>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/qeFOYlHmyGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        
        
        <div class="container">
          <section id="about us"></section>
        </div>
        
    </div>    
  </body>
</html>

Answer 1

您的标题宽度未指定，因此其标题是根据其内容计算的，并且不会覆盖页面的整个宽度。这意味着您需要为标题设置宽度。

将width: 100%添加到您的#header中。

如何在徽标的右侧（相反）移动导航栏ul列表

1 个答案: