html - 等间距最大宽度导航

Question

所以我正在努力实现这样的目标:

1. 每个链接之间的间距相等
2. 在每个链接之间的空白区域中间有一个分隔符
3. 菜单流畅
4. 当页面上没有更多空间时，长元素会分成多行，但每个链接之间的空间保持相等(这是棘手的)

我一直遇到的问题是，一旦某些东西需要分成多行，每个链接之间的间距就不再相等。

• 在示例 1 中，您可以看到当文本中断到多行(链接之间的空间不再相等)
• 在示例 2 中，您可以看到当链接没有中断时多行间距正确。

我已经尝试了无数种方法来尝试让它工作，但似乎没有什么能让 anchor 在文本分成多行时表现出来。 (如果只有内联会表现)

示例 1

.nav-section {
  width: 100%;
  max-width: 450px;
}
.nav-section__list {
  display: flex;
  justify-content: space-between;
}
.nav-section__item-divider {
  min-width: 10px;
  position: relative;
  background: red;
}
.nav-section__link {
  display: inline;
  background: orange;
  padding: 0 20px;
}

<nav class="nav-section">
  <div class="nav-section__list">

    <a href="#" class="nav-section__item  nav-section__link">Super long12312 link blah</a>
    <div class="nav-section__item-divider"></div>
    <a href="#" class="nav-section__item  nav-section__link">Semi long link blah blah blah</a>
    <div class="nav-section__item-divider"></div>
    <a href="#" class="nav-section__item  nav-section__link">long link</a>

  </div>
</nav>

示例 2

.nav-section {
  width: 100%;
  max-width: 450px;
}
.nav-section__list {
  display: flex;
  justify-content: space-between;
}
.nav-section__item-divider {
  min-width: 10px;
  position: relative;
  background: red;
}
.nav-section__link {
  display: inline;
  background: orange;
  padding: 0 20px;
}

<nav class="nav-section">
  <div class="nav-section__list">

    <a href="#" class="nav-section__item  nav-section__link">Super long12312</a>
    <div class="nav-section__item-divider"></div>
    <a href="#" class="nav-section__item  nav-section__link">Semi long link blah</a>
    <div class="nav-section__item-divider"></div>
    <a href="#" class="nav-section__item  nav-section__link">long</a>

  </div>
</nav>

Answer 1

我相信这只是 HTML 包装长内容的一个功能。如果您使用 HTML 检查器查看链接之间的间距，间距仍然相同，但包装的内容不会跨越链接的整个宽度。

您可以尝试使用 text-align:justify 属性。这将使链接之间的间距按照您想要的方式显示，但会增加链接中每个单词之间的间距。

.nav-section {
  width: 100%;
  max-width: 450px;
}
.nav-section__list {
  display: flex;
  justify-content: space-between;
}
.nav-section__item-divider {
  min-width: 10px;
  position: relative;
  background: red;
}
.nav-section__link {
  display: inline;
  background: orange;
  padding: 0 20px;
  text-align:justify;
}

<nav class="nav-section">
  <div class="nav-section__list">

    <a href="#" class="nav-section__item  nav-section__link">Super long 12312 12312</a>
    <div class="nav-section__item-divider"></div>
    <a href="#" class="nav-section__item  nav-section__link">Semi long link blah</a>
    <div class="nav-section__item-divider"></div>
    <a href="#" class="nav-section__item  nav-section__link">long</a>

  </div>
</nav>