因此,我正在尝试实现以下目标:

html - 等间距最大宽度导航-LMLPHP


每个链接之间的间距相等
每个链接之间的空白区域中间有一个分隔符
菜单很流畅
当页面上没有更多空间时,长项分成多行,但每个链接之间的间隔保持相等(这是棘手的)


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


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


html - 等间距最大宽度导航-LMLPHP

我尝试了无数种方法来尝试使它起作用,并且一旦文本分成多行,似乎也没有任何锚点的行为。 (如果仅内联会表现出来)

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

最佳答案

我相信这只是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>

10-08 13:37
查看更多