Question

我正在尝试将导航栏向上推，并将导航栏向上对准应该是徽标的label，但是我不知道该怎么做...任何帮助将不胜感激。 ..这是代码：

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Verdana;
    }

    html, body {
      height: 100%;
    }

    .container1 {
      min-height: 100%;
    }

    .main {
      overflow: auto;
      padding-bottom: 50px;
    }

    div.footer>a {
      text-decoration: none;
      color: red;
    }

    div.footer {
      background-color: black;
      color: white;
      position: relative;
      height: 50px;
      margin-top: -50px;
      clear: both;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    nav ul li a {
      text-decoration: none;
      background-color: black;
      color: white;
      font-size: 17px;
      margin: 20px;
    }
    nav ul li {
      list-style: none;
    }
    nav ul.navbar {
      display: flex;
      justify-content: center;
    }

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Home</title>
      <link rel='stylesheet' href='../Css/styles.css' </head>

    <body>
      <nav>
        <span><label id='logo'>Logo</label></span>
        <ul class='navbar'>
          <li><a href='#' class='active'>Home</a></li>
          <li><a href='#'>Services</a></li>
          <li><a href='#'>About</a></li>
          <li><a href='#'>Contact</a></li>
        </ul>
      </nav>
      <div class='container1'>
        <div class='main'>

        </div>
      </div>
      <div class='footer'>
        Created by&nbsp;<a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ? 
        view_as=subscriber' target='_blank'>Precious Nyaupane</a>|&copy; 2020 All rights reserved
      </div>
    </body>

    </html>

Answer 1

将nav显示为flex应该可以解决问题

nav {
  display: flex;
}

Demo

如何将导航栏与标签对齐

1 个答案: