为什么我的嵌套 div 内容在缩小，而 space 我没有声明出现在 div 容器之间？

Question

这是我的 html 文件：

<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>

和 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;
}

这是我得到的输出： image of the undesired output I'm getting

不知道为什么在header标签#fsect和#menus下的两个parentdiv之间有space而且内容也无法正常获取spaced。请帮我解决这个问题，我已经尝试了所有我知道的。无论我尝试什么，两个 div 之间的 space 都不会消失，内容也会保持收缩在一起。 html 已正确呈现，但 css 未按我希望的方式工作。这是我希望 header 的排列方式： The header of this picture is the design I want to get on my css

请帮忙！

Answer 1

我建议将您的 header 更改为 flex-box，除非您有特定原因需要使用网格。以下样式变化：

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-container.

flex-direction 指定我们是在行还是列中布置 children。你的 header 是一行。

justify-content 指定 flex-container 将如何沿其 main-axis 为其 children 分配 space（其 main-axis 是一行您为 flex-drection 指定 'row'，当您指定 'column' 时指定一列）。 space-between 将最大化元素之间的白色数量space。您可能更喜欢 space-around.

align-items 指定 flex-container 将如何沿其相反的轴对齐项目（无论上面轴的相反方向是什么）。如果您想将项目大致放置在 header 的 'center' 垂直方向，根据您的示例看起来就是这种情况，那么您需要此处的值 'center'。

移动那个内部的外部 div:

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

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

我会暂时删除或注释掉您的其他 css 类，看看上面的内容对您有何帮助。然后根据需要添加内容。

为什么我的嵌套 div 内容在缩小，而 space 我没有声明出现在 div 容器之间？

Why is my nested div content shrinking and space I did not declare appearing between the div containers?

css

flexbox

frontend

css-grid

web-frontend