列表之间的边距/填充不起作用

Question

当页面宽度缩小时，我试图通过媒体查询更改导航栏列表的显示。我在列表之间添加了填充，但它并没有以某种方式出现。我想知道是不是因为 flexbox 或其他原因。

HTML 代码

<header id="header">
      <h1><img id="header-img" src="https://cdn-icons-png.flaticon.com/512/4907/4907546.png" alt="cat tower">Aristocat Tower</h1>
      <nav id="nav-bar">
        <ul id="nav-list">
          <li><a class="nav-link" href="#features">Features</a></li>
          <li><a class="nav-link" href="#howItWorks">How It Works</a></li>
          <li><a class="nav-link" href="#pricing">Pricing</a></li>
        </ul>
      </nav>
    </header>

CSS 代码

#header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#nav-list {
  list-style: none;
  display: flex;
  flex-direction: row;
}

.nav-link {
  margin: 1em 1em;
}

@media (max-width: 750px) {

    #header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .nav-link {
    padding: 5px;
  }

}

页面图片

Answer 1

您应该将填充应用于<li>，而不是<a>。如果您将代码更改为：

<ul id="nav-list">
    <li class="nav-link"><a href="#features">Features</a></li>
    <li class="nav-link"><a href="#howItWorks">How It Works</a></li>
    <li class="nav-link"><a href="#pricing">Pricing</a></li>
</ul>

填充应该可以正常工作。如果您想将<a> 标签与其类一起保留，您可以直接将样式应用于列表标签，如下所示：

#nav-list li {
    padding: 5px;
}

另外，看看这个链接here。

Answer 2

您在这里使用引导类。 您可以简单地使用引导填充类进行填充，或者如果您想要边距，您可以使用边距类。 使用 px 进行水平填充，使用 py 进行垂直填充。 使用 mx 作为水平边距，使用 my 作为垂直边距。 后跟值（mx-1 到 mx-5）或（px-1 到 px-5）。

<ul class="nav">
<li class="nav-item px-4">
  <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
  <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
  <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
  <a class="nav-link disabled" href="#">Disabled</a>
</li>