html - 当我添加位置 : absolute to my navbar, 时，justify-content: space-between 停止工作

Question

我正在尝试使用 float 在其顶部的导航栏的标题图像。

how it looks

也就是用css和html作为

<div class="header-container">

<!-- START HEADER IMAGE -->
<section class="header-image">
  <img src="./img/cntower.png">
</section>

<!-- END HEADER IMAGE -->

<!-- TOP LEVEL NAVIGATION -->
<div class="navbar">
  <div>
    <p>
      <strong>GTA Wholesale</strong>
    </p>
  </div>

  <div>
    <p><strong>All</strong></p>
    <p><a>Published</a></p>
    <p><a>Drafts</a></p>
    <p><a>Deleted</a></p>
    <p><a>New</a></p>
  </div>
</div>

<!-- END TOP LEVEL NAVIGATION -->


</div>

CSS:

img {
  max-width 100%;
}

.header-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.navbar {
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 0;
}

.header-image {
  display: flex;
}

.header-image img {
  max-width: 100%;
}

在我的导航栏类中，如果我删除 position: absolute 它不会出现在我的图像之上，但是当存在 position absolute 时，space-between 属性不适用。我该如何解决这个问题？

Answer 1

您可以保留absolute 参数并将left: 0 和right: 0 添加到您的navbar 类。

示例:https://jsfiddle.net/cg4pwod8/