html - 有没有比 padding-left 更有效的方法来调整导航栏中的项目

问题描述

我希望你们一切都好，我有这个导航栏，我花了很长时间才弄清楚如何将填充与徽标和我的“li”元素分开，这样我才能有一个很好的居中菜单。但我认为我有点工作，但我喜欢以正确的方式做事，有没有人有更好的方法来集中所有“li”元素（Home，About ...）。

因为目前我有padding-left: 30em;哪个让菜单感觉居中，但是有没有办法自动做到这一点？我尝试填充自动，但这不起作用。

感谢您帮助年轻的开发人员。

@media screen and (min-width: 780px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    margin: 0;
    min-height: 100vh;
  }

  ul {
    list-style: none;
  }

  a, u {
    text-decoration: none;
  }

  .header-menu {
    background-color: grey;
    padding: 1em 1em;
    width: 100vw;
    display: inline-flex;
    align-items: center;
  }

  .header-flex, {
    display: inline-flex;
    align-items: center;
  }

  .logo {
    cursor: pointer;
  }

  .main-nav {
    cursor: pointer;
    padding-left: 30em;
  }

  .main-nav li {
    display: inline-block;
    padding: 0em 1.2em;
  }

  .main-nav a {
    color: #34495e;
    font-size: .99em;
  }

  .main-nav a:hover {
    color: #718daa;
  }
}

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

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="./css/home.css">
</head>

<body>

  <header>
    <div class="header-menu">
      <h1 class="logo">Logo</h1>
      <nav class="header-flex">
        <ul class="main-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

</body>

</html>

感谢帮助，我是如何解决这个问题的

      @media screen and (min-width: 780px) {
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        body {
          margin: 0;
          min-height: 100vh;
        }

        ul {
          list-style: none;
        }

        a, u {
          text-decoration: none;
        }

        .header-menu, .header-flex {
          background-color: grey;
          padding: 1em 1em;
          width: 100vw;
          display: inline-flex;
          align-items: center;
        }

        .logo {
          cursor: pointer;
        }

        .main-nav {
          cursor: pointer;
          margin: 0 auto;
        }

        .main-nav li {
          display: inline-block;
          padding: 0em 1.2em;
        }

        .main-nav a {
          color: #34495e;
          font-size: .99em;
        }

        .main-nav a:hover {
          color: #718daa;
        }
      }

标签： htmlcss

html - 有没有比 padding-left 更有效的方法来调整导航栏中的项目

问题描述

解决方案

推荐阅读