响应式设计导航按钮布局问题

Question

我刚刚在这里学习html / css。现在我正在尝试使用响应式设计设置我的第一个网页。当视口通过媒体查询缩小到 500 像素或更少时，我已将其他所有内容设置为缩小为单列布局。除了我的导航按钮之外的所有东西。目前，它们被压缩，最后一个

<a>

元素移动到其余元素下方，但我试图让最后两个

<a>

元素移动到前两个元素下方，形成所有 4 个按钮的类似立方体的布局，同时保持当视口超过 500px 时的

display: inline-block

布局...如果这有意义的话。

不确定这是否与该问题有关，但默认情况下用于按钮的图像为 563x193，其高度设置为 40 以减小其在网页上的尺寸。

我当前的导航按钮 HTML 和 CSS 如下。温柔一点，我是新手，一无所知。

nav {
  text-align: center;
}

nav a {
  display: inline-block;
  margin: 0 10px;
}


/* Breakpoint 1 */

@media screen and (min-width: 200px) and (max-width: 500px) {
  .sampsonworks-logo {
    width: 95%;
  }
  #main_home {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
  }
  nav a {
    margin: 0px;
  }
  #left_section,
  #middle_section,
  #right_section {
    width: 95%;
    box-sizing: border-box;
    margin: 0 auto;
  }
}

<nav>
  <a href="/aboutme/aboutme.html">
    <img src="/img/buttons/about_me.jpg" alt="" height="40">
  </a>
  <a href="/artwork/artwork.html">
    <img src="/img/buttons/3d_artwork_button.jpg" alt="" height="40">
  </a>
  <a href="/services/services.html">
    <img src="/img/buttons/services_button.jpg" alt="" height="40">
  </a>
  <a href="/contact/contact.html">
    <img src="/img/buttons/contact_me_button.jpg" alt="" height="40">
  </a>
</nav>

我已尝试对 CSS 进行以下更改。这确实将按钮设置为所需的 2x2 网格，但按钮之间存在巨大间隙，我似乎无法通过边距或宽度变化来减小间隙。

nav {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav a {
    display: inline-block;
    margin: 0 10px;
}

@media screen and (max-width: 500px) {
    nav a {
        width: 45%;
  }
}
  

Answer 1

如果没有您的所有 HTML 代码，很难确切地找出什么可以解决您的特定问题，但我测试了您提供的代码，以下是我为尽我所能回答您的问题所做的。

---

我将其添加到

nav a {}

选择器下方：

@media screen and (min-width: 501px) {
    nav {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        position: relative;
    }
    nav > a {
        width: 50%;
    }
}

---

如果您有任何疑问或对代码有更多见解，请随时发表评论并告诉我。