Question

所以我试图实现这样的目标：

每个链接之间的间距相等
在每个链接之间的空白区域中间有一个分隔符
菜单流畅
当页面上没有空格时，长项会分成多行，但每个链接之间的空间保持不变（这很棘手）

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

在示例1中，您可以看到文本中断时会发生什么多行（链接之间的空格不再相等）
在示例2中，您可以看到链接没有突破时多行间距正确。

我已经尝试了无数种尝试让它发挥作用的方法，似乎没有任何东西可以使锚点在文本分成多行后表现出来。（如果只有内联行为）

示例1

＆＃13;

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

＆＃13;

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

＆＃13;

示例2

＆＃13;

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

＆＃13;

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

＆＃13;

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>

等间距最大宽度导航

1 个答案: