在屏幕更改大小时管理列表分隔符（媒体查询）

Posted 2023-03-06

【中文标题】在屏幕更改大小时管理列表分隔符（媒体查询）

【英文标题】：Manage liste separator while the screen change size (media query)

【发布时间】：2021-07-08 17:41:09

【问题描述】：

我尝试在列表的每个元素之间管理分隔符（如“-”）。 当我们只有一行的时候比较简单，但是我不能多行。

当网站显示在大屏幕上时，我有：

示例 居中对齐

Listitem1 - listitem2 - listitem3 - ... - listitemX

最后一项没有分隔符“-”

html

<p>
    <a>listitem1</a>
    <a>listitem2</a>
    <a>listitem3</a>
    <a>listitem4</a>
    <a>listitem5</a>
    <a>listitem6</a>
    <a>listitem7</a>
...
    <a>listitemX</a>
</p>

CSS

a:nth-child(n+2)::before 
  content: " - "

这在 CSS 中使用第二个孩子之前的 :: before 相对容易......

但是对于媒体查询，当我的屏幕缩小并且同一个列表跨越多行时，我想从每行中删除最后一个“-”分隔符。

示例 居中对齐

Listitem1 - listitem2 - listitem3 - listitem4（这里没有分隔符） Listitem5 - listitem6 - listitem6 - listitem8（这里也没有分隔符） Listitem9 - 等等...

有人有想法吗？ 先感谢您。塞巴斯蒂安

【问题讨论】：

列表是否左/右/居中对齐？

居中对齐！

为了澄清您的问题，因为您使用的是::before 而不是::after，所以错误的分隔符将出现在每个后续行的开头（例如，在 Listitem5 和 Listitem9 之前），而不是在项目之后4和8，对吧？

是和否......因为它是管理换行符的浏览器，将所有内容视为文本。如果您使用<ul> <li> 标签，您绝对正确

@Noleli 似乎浏览器可能会从它的 li 中分离出之前（如果有的话，我假设是之后） - 这使得即使是 JS 解决方案也相当困难，因为我们不能假设伪元素和它的元素在同一行，

【参考方案1】：

似乎没有一个纯 CSS 的解决方案，但是你可以使用一点 JS 来根据一个项目是否是一行中的第一个来设置或取消设置一个类。

这里我将文本颜色设置为透明而不是将内容设置为“”，因为更改内容会影响宽度，然后在换行/调整大小时会跳来跳去。

a.firstInLine::before 
    color: transparent;

javascript 遍历节点并检查它在页面上是否低于前一个节点。如果是（误差不小），则设置类firstInLine：

function calcY() 
    document.querySelectorAll("p a").forEach((n, i, nodes) => 
        if(i > 0) 
            const thisY = n.getClientRects()[0].y;
            const prevY = nodes[i - 1].getClientRects()[0].y;
            
            if(thisY - prevY > 4) 
                n.classList.add("firstInLine");
            
            else 
                n.classList.remove("firstInLine");
            
        
    );


window.addEventListener("resize", calcY);
calcY();

我应该补充一点，还有一些其他的 CSS 需要设置。我们不希望它换行，为了让getClientRects 正常工作，它不能是纯粹的内联元素，所以：

a 
    white-space: nowrap;
    display: inline-block;

CodePen

【讨论】：

谢谢你，居中还是不完美，哈哈，非常感谢你很好的解决方案;-)

是的，将分隔符变为透明意味着居中会有点偏离。您可以通过玩一些边距来解决它。

你是对的：``` a.firstInLine::before color: transparent;左边距：-10px； ```非常感谢

很高兴它成功了！如果您不介意，请将我的回答标记为已接受？

我是比利时人，会说法语，这是我在这个网站上的第一个问题，即使我已经知道这个网站很长时间了。我一直在寻找在哪里确认您的答案 5 分钟大声笑...这个按钮在哪里？明白了。