ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 내 navbar를 레이블 태그에 정렬하려면 어떻게해야합니까?
    카테고리 없음 2020. 8. 8. 15:48

    질문

    내 navbar를 위로 밀고 내 navbar를 로고가 될 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>


    답변1

    nav를 flex로 표시하는 것이 트릭을해야합니다.

    nav {
      display: flex;
    }

    데모



     

     

     

     

    출처 : https://stackoverflow.com/questions/62016219/how-can-i-align-my-navbar-to-the-label-tag

    댓글

Designed by Tistory.