CSS 내비게이션바 양쪽 정렬

1 개요

CSS 내비게이션바 양쪽 정렬

<style>
  body { margin: 0; }
  .navbar {
    display: inline-block;
    width: 100%;
    background: hotpink;
  }
  .navbar>div { float: right; }
  .navbar>ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .navbar>ul>li {
    display: inline-block;
    padding: 0;
  }
  .navbar a {
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    color: white;
  }
  .navbar a:hover { background: deeppink; }
</style>

<nav class="navbar">
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
  </ul>
  <div><a href="#">☰</a></div>
  <div><a href="#">로그인</a></div>
</nav>

2 같이 보기

• CSS 내비게이션바