水平列表的响应式分隔符 [英] Responsive Separator for Horizontal List

问题描述

此问题扩展了导航分隔符"，询问如何删除由视口大小导致的换行符分隔符.

This question expands upon 'Separators For Navigation' by asking, how it is possible to remove the separators at the line breaks cause by viewport size.

->       Item 1 | Item 2 | Item 3 | Item 4 | Item 5       <-

小视口

->  Item 1 | Item 2 | Item 3  <-
->      Item 4 | Item 5       <-

这是一个显示管道如何保持在换行符处的小提琴:

Here is a fiddle that shows how a pipe remains at the line break:

小提琴.

我对仅使用 css 的解决方案感兴趣，但如果 javascript 提供唯一可能的解决方案，则它是可以接受的.

I'm interested in a css-only solution, but javascript is acceptable if it provides the only possible solution.

推荐答案

你可以利用尾随和行尾空格自动折叠的事实，因此设置 inline ::after { content: ' ';字距:2em；} 为您提供了宽的内联元素，可以装饰背景或边框，并且神奇地"当它恰好位于行尾或作为块的最后一个元素时消失.

You can exploit fact that trailing and line trailing white space automatically collapses, so setting inline ::after { content: ' '; word-spacing: 2em; } gives you wide inline element that can have decorated backgrounds or borders and "magically" disappears when it happens to be located at the end of a line or as a last element of a block.

简化用例(来自 https://codepen.io/myf/pen/dyOzpZM，仅在 2021-02 常绿 Firefox 和 Chromium 中进行测试，在 Chromium Edge 之前的版本中不起作用；有关更强大的示例，请参阅下面的第二个片段):

Simplified use case (from https://codepen.io/myf/pen/dyOzpZM, tested just in 2021-02 evergreen Firefox and Chromium, will not work in pre-Chromium Edge; for more robust example see the second snippet below):

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline;
}
li::after {
  content: " ";
  word-spacing: 1em;
  background-image: linear-gradient(
    -0.2turn,
    transparent 0 calc(50% - 0.03em),
    currentcolor 0 calc(50% + 0.03em),
    transparent 0
  );
}
/*
  That's it: just inline text with styled ::after spaces
    that collapse at line breaks and at the end of the element.

  That's basically how spaces work.
*/
/* Some unrelated whimsical effects follow: */
body { background: #456; color: #fed; min-height: 100vh; margin: 0; display: flex; align-items: center; }
ul { --dur: 3s; font-family: Georgia, serif; font-size: min(7vw, calc(100vh / 7)); margin: 0 auto; position: relative; padding: 0 1em; -webkit-text-fill-color: #999; text-transform: capitalize; animation: poing var(--dur) infinite alternate ease-in-out; }
@keyframes poing { from { max-width: 3.4em; } to { max-width: min(19em, calc(100vw - 2em)); color: lime; } }
ul::before, ul::after { -webkit-text-fill-color: currentcolor; position: absolute; top: 50%; transform: translatey(-50%); animation: calc(var(--dur) * 2) calc(var(--dur) * -1.5) infinite forwards linear; }
ul::before { content: "☜"; left: 0; animation-name: a !important; }
ul::after { content: "☞"; right: 0; animation-name: b !important; }
@keyframes a { 50% { content: "☛"; } }
@keyframes b { 50% { content: "☚"; } }
ul:hover, ul:hover::before, ul:hover::after { animation-play-state: paused; }

<ul>
 <li>foo</li>
 <li>bar</li>
 <li>baz</li>
 <li>gazonk</li>
 <li>qux</li>
 <li>quux</li>
</ul>

它使用带有单个单词项的平面列表，因此与实际使用不太相关.适合导航的更现实的变化可能是类似于 https://jsfiddle.net/vnudrsh6/7/ :

It uses flat list with single word items, so is not very relevant for real-world usage. More realistic variation suitable for navigation could be something like https://jsfiddle.net/vnudrsh6/7/ :

nav {
  text-align: center;
  padding-right: 1em; /* = li::after@word-spacing */
}
ul {
  display: inline;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
  /*
   white-space: nowrap should be moved to child A
   because IE fails to wrap resulting list completely
  */
}
li::before {
  content: ' ';
  /*
   this content is important only for Chrome in case
   the HTML will be minified with *no whitespaces* between </li><li>
  */
}
li::after {
  content: ' ';
  /*
   this is actual placeholder for background-image
   and it really must be space (or tab)
  */
  white-space: normal;
  word-spacing: 1em;
  /*
   = nav@padding-right - this actually makes width
  */
  background-image: radial-gradient(circle, black, black 7%, transparent 15%, transparent 35%, black 45%, black 48%, transparent 55%);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.5;
}
/*
 no need to unset content of li:last-child::after
 because last (trailing) space collapses anyway
*/
a {
  white-space: nowrap;
  display: inline-block; /* for padding */
  padding: 1em;
  text-decoration: none;
  color: black;
  transition-property: background-color;
  transition-duration: 500ms;
}
a:hover {
  background-color: #ccc;
}
/*
 For demonstrative purposes only
 Give items some content and uneven width
*/
nav:hover > ul > li {
  outline: 3px dotted rgba(0,0,255,.5);
  outline-offset: -3px;
}
nav:hover > ul > li::after {
  opacity: 1;
  background-color: rgba(255, 0, 0, .5);
}
nav:hover > ul > li:hover {
  outline-style: solid;
}
nav:hover > ul > li:hover::after  {
  background-color: cyan;
}

nav:hover > ul > li > a {
  outline: 3px solid rgba(0,255,0,.5);
  outline-offset: -3px;
}

nav > ul {
  counter-reset: c;
}
nav > ul > li {
  counter-increment: c;
}
nav > ul > li > a::before {
  content: counter(c, upper-roman) '. ';
  letter-spacing: .3em;
}
nav > ul > li > a::after {
  content: ' item ' counter(c, lower-roman);
  word-spacing: .3em;
  letter-spacing: .1em;
  transform: translatex(.1em);
  display: inline-block;
}

<nav>
  <ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
  </ul>
</nav>
<!--  For demonstrative purposes is content of links made by CSS
-->

此概念验证使用最终折叠"的背景图像CSS 在每个

之后生成内容 space.2016 年在 Firefox、Chrome 和 IE11 中测试.

This proof-of-concept uses background-image of "eventually colapsing" CSS generated content space after each <li>. Tested in 2016 in Firefox, Chrome and IE11.

其他值得注意的答案:

• 2014 年这个被忽视的答案，早于我的.
• 此处使用的技巧相同.
• 使用 flex-box 的非常令人印象深刻的替代方案 - 简单的过度延伸的边框和由于 flex 排列而产生的不同间距.

• This overlooked answer from 2014, predating mine.
• Same trick used here.
• Very impressive alternative using flex-box - plain over-extending borders and different spacing due flex arrangement.

这篇关于水平列表的响应式分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！