因此,我正在尝试实现以下目标:
每个链接之间的间距相等
每个链接之间的空白区域中间有一个分隔符
菜单很流畅
当页面上没有更多空间时,长项分成多行,但每个链接之间的间隔保持相等(这是棘手的)
我一直遇到的问题是,一旦某些东西需要分成多行,则每个链接之间的间距将不再相等。
在示例1中,您可以看到当文本中断到
多行(链接之间的间距不再相等)
在示例2中,您可以看到当链接没有断开时
多行间距正确。
我尝试了无数种方法来尝试使它起作用,并且一旦文本分成多行,似乎也没有任何锚点的行为。 (如果仅内联会表现出来)
例子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>