Html css理由-内容:当父级对齐内容中心处于活动状态时,空格不能正常工作

2g32fytz  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(87)

我现在有以下布局

现在我真的很想有所有的h2s与测试旁边彼此之间的空间
我被告知要把这个加到我的css里

justify-content: space-between;

我希望获得与此类似的结果,但是当我添加

justify-content: space-between;

什么都没发生
这是我用的密码
一个二个一个一个
我假设这个问题是由div父项引起的,但是我非常不确定如何解决这个问题

w6lpcovy

w6lpcovy1#

您需要将display设置为flex才能使space-between工作:

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

如果测试元素之间的间距太大,请尝试使用center代替space-between,然后添加一些左/右边距。

相关问题