Как выровнять панель навигации по тегу метки - PullRequest
0 голосов
/ 26 мая 2020

Я пытаюсь настроить sh мою навигационную панель и выровнять мою навигационную панель до label, который должен быть lo go, но я не знаю, как я могу это сделать ... любая помощь были бы признательны ... вот код:

    * {
      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>

1 Ответ

2 голосов
/ 26 мая 2020

Отображение навигации как гибкости должно помочь

nav {
  display: flex;
}

Демо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...