问题

我现在有以下布局

现在我真的希望所有的h2标题都并排，之间有间隔

有人告诉我要将这段代码添加到我的CSS中

justify-content: space-between;

我希望实现类似于这样的结果，但是当我添加

justify-content: space-between;

时，什么也不发生

这是我使用的代码

<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言: lang-css -->
.navbar {
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #003959;
  color: white;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

<!-- 语言: lang-html -->
<div class="navbar">
  <h1>test</h1>
  <div style="justify-content: space-between;">
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
  </div>
</div>
<!-- 结束代码片段 -->
   
我认为问题可能是由父级div引起的，但我非常不确定如何解决这个问题。

<details>
<summary>英文:</summary>

I have the following laylout right now 

[![Sample image][1]][1]

Now id really like to have all of the h2s with test next to each other with space between 

I was told to add this to my css


    justify-content: space-between;


[![Example of desired result][2]][2]


  [1]: https://i.stack.imgur.com/sfPLl.png
  [2]: https://i.stack.imgur.com/OUd3W.png

Id like to achieve a result similar to this however when I add

    justify-content: space-between;

Nothing happens 

here&#39;s the code I used

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .navbar {
      position: fixed;
      text-align: center;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      background-color: #003959;
      color: white;
      justify-content: center;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;navbar&quot;&gt;
      &lt;h1&gt;test&lt;/h1&gt;
      &lt;div style=&quot;justify-content: space-between;&quot;&gt;
        &lt;h2&gt;test&lt;/h2&gt;
        &lt;h2&gt;test&lt;/h2&gt;
        &lt;h2&gt;test&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

   
I assume the issue is caused by the div parent but I&#39;m very unsure how to solve this

</details>


# 答案1
**得分**: 1

You need to set the `display` to `flex` for `space-between` to work:

```css
.navbar {
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #003959;
  color: white;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

<div class="navbar">
  <h1>test</h1>
  <div style="justify-content: space-between; display: flex;">
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
  </div>
</div>

If that spaces the test elements too far apart, try center instead of space-between and then add some left/right margins to them.

.navbar {
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: auto;
background-color: #003959;
color: white;
justify-content: center;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
}

<div class="navbar">
<h1>test</h1>
<div style="justify-content: space-between;display:flex;">
<h2>test</h2>
<h2>test</h2>
<h2>test</h2>
</div>
</div>