水平列表的响应式分隔符 | 水平列表的响应式分隔符

本文介绍了水平列表的响应式分隔符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

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