响应式居右导航栏

最新推荐文章于 2022-03-11 15:42:10 发布

RinerLau

最新推荐文章于 2022-03-11 15:42:10 发布

阅读量314

点赞数

文章标签： html css flex

本文链接：https://blog.csdn.net/q850593913/article/details/106584236

版权

响应式导航栏

<nav>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<style>
    html
    ,body{
      font-size:62.5%;
    }
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    nav {
      display:flex;
      justify-content:flex-end;
      background: #be3144;
    }
    nav ul{
      display:flex;
      margin-right:2rem;
    }
    nav a{
      display:block;
      font-size:2.2rem;
      padding:2rem;
      color:#fff;
    }
    @media (max-width: 28rem){
      nav{
        justify-content:center;
      }
    }
</style>