为什么我的嵌套 div 内容缩小并且我未声明的空间出现在 div 容器之间？

Question

这是我得到的输出：

我不知道为什么标题标签#fsect和#menus下的两个父div之间有空格，并且内容也无法正确间隔。

无论我如何尝试，两个 div 之间的空间都不会消失，内容也会保持收缩在一起。 html 已正确呈现，但 css 未按我想要的方式工作。

这是我想要的标题排列方式：

* {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  text-decoration: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: auto;
  width: 100%;
  column-gap: 0%;
  background: #fff;
}

#ballo {
  grid-column: 1/2;
}

#balloresize {
  width: 50%;
  height: 30%;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#balloicresize {
  max-width: 100%;
  box-sizing: border-box;
}

#menus {
  grid-column: 2/3;
  display: flex;
  flex-flow: row nowrap;
  width: 50%;
  justify-content: space-evenly;
}

<header>
  <div id="ballo">
    <div id="balloresize"> <img src="images/BAL.png" alt="" id="balloicresize">
      <h2>Black Anthem LTD</h2>
    </div>
  </div>
  <div id="menus">
    <div class="icir">
      <img src="images/bmenu icon.png" alt="menu" class="icimg">
    </div>
    <div id="home">
      <a href="https://www.blackanthemltd.site/">
        <h3>HOME</h3>
      </a>
    </div>
    <div id="aut">
      <a href="https://www.blackanthemltd.site/About">
        <h3>ABOUT</h3>
      </a>
    </div>
    <div id="serv">
      <a href="https://www.blackanthemltd.site/Services">
        <h3>SERVICES</h3>
      </a>
    </div>
    <div id="proj">
      <a href="https://www.blackanthemltd.site/Projects">
        <h3>PROJECTS</h3>
      </a>
    </div>
    <div id="gal">
      <a href="https://www.blackanthemltd.site/Gallery">
        <h3>GALLERY</h3>
      </a>
    </div>
    <div id="raq">
      <a href="https://www.blackanthemltd.site/RAQ">
        <h3>REQUEST A QUOTE</h3>
      </a>
    </div>
  </div>
</header>

Answer 1

我建议将标题更改为弹性框，除非您有特定原因需要使用网格。以下风格变化：

header {
    width: 100%;
    background: #fff;

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

display: flex

表示该元素将是一个弹性容器。

flex-direction

指定我们是否将子项布置在行或列中。你的标题是一行。

justify-content

指定 Flex 容器如何沿其主轴线为其子级分配空间（当您为

flex-drection

指定“行”时，其主轴线为行；当您指定“列”时，其主轴线为列）。

space-between

将最大化元素之间的空白量。您可能更喜欢

space-around

。

align-items

指定弹性容器如何沿其相反的轴（无论与上面的轴相反的轴是什么）对齐项目。如果您想将项目大致放置在标题的垂直“中心”处（根据您的示例看起来就是这种情况），那么您需要在此处设置“center”值。

移动内部 div 的外部：

<div id="ballo">
  <img src="images/BAL.png" alt="" id="balloicresize">
  <h2>Black Anthem LTD</h2> 
</div>

各个菜单项之间的间距仍然不理想，您可以通过使用您选择的填充值来解决这个问题。

我会暂时删除或注释掉你的其他 css 类，看看上面的内容能给你带来什么。然后根据需要添加内容。