Html 换行时更改样式

我有一个带有

display:inline block

的HTML列表，我想用一行分隔它，形成一个页脚菜单。 为此，我为每个列表项应用一个左边框，该列表项之前有一个项。但是，当屏幕变小且换行时，第二行中的第一项显示边框

当第二行的第一个项目出现断线时，如何隐藏该项目的边框

这是一把小提琴：

李{
线高：24px；
显示：内联块；
边界权：无；
}
李~李{
左边框：红色2px实心；
左侧填充：5px；
}
div{
文本对齐：居中；
}

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项

我认为没有办法按照你想要的方式去做，你必须改变方法

我尝试了这些风格来实现你想要的：

ul{
  padding:0; overflow:hidden;
}
li {
    line-height: 24px;
    display: inline-block;
    border-right: none;
    padding-left: 5px;
}
li~li {
    box-shadow: -2px 0px 0px red;
}

我不使用边框，而是使用框外的框阴影，并将溢出隐藏设置为列表，这样它将始终隐藏每行上第一个元素的阴影

以下是一个工作示例：

另一个“工作”与文本对齐：居中

编辑

使用不同的方法：在覆盖每行第一项上的行之前：

---

我认为没有办法按照你想要的方式去做，你必须改变方法

我尝试了这些风格来实现你想要的：

ul{
  padding:0; overflow:hidden;
}
li {
    line-height: 24px;
    display: inline-block;
    border-right: none;
    padding-left: 5px;
}
li~li {
    box-shadow: -2px 0px 0px red;
}

我不使用边框，而是使用框外的框阴影，并将溢出隐藏设置为列表，这样它将始终隐藏每行上第一个元素的阴影

以下是一个工作示例：

另一个“工作”与文本对齐：居中

编辑

使用不同的方法：在覆盖每行第一项上的行之前：

---

如果在换行时第一行的分隔没有问题，可以执行以下操作：

在所有

li

元素中使用

border right

，而不是使用

border left

ul{
文本对齐：居中；
}
李{
线高：14px；
显示：内联块；
}
李：不是（最后一个孩子）{
右边框：红色1px实心；
右边填充：10px；
}

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项

如果在换行时第一行出现分隔没有问题，可以执行以下操作：

在所有

li

元素中使用

border right

，而不是使用

border left

ul{
文本对齐：居中；
}
李{
线高：14px；
显示：内联块；
}
李：不是（最后一个孩子）{
右边框：红色1px实心；
右边填充：10px；
}

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项

您能将列表拆分为子列表吗？我想这需要一些JS，我的目标是只使用CSS。您能将列表拆分为子列表吗？我想这需要一些JS，我的目标是只使用CSS。您的方法很有趣，但当文本居中对齐时，它不起作用。对不起，忘了加那个。这只是一个例子；我想告诉你的是，你需要的是css技巧，而不是任何规则，你必须相信。顺便说一句，文本居中对齐是什么意思？？它应该和文本对齐中心一起工作，我明白你的意思了。是的，我们需要技巧。将主体{text align:center；}添加到小提琴中，您将看到它在居中时不起作用；您的方法很有趣，但是当文本居中对齐时，它不起作用。对不起，忘了加上这个。这只是个例子；我想告诉你的是，你需要的是css技巧，而不是任何规则，你必须相信。顺便说一句，文本居中对齐是什么意思？？它应该和文本对齐中心一起工作，我明白你的意思了。是的，我们需要技巧。将主体{text align:center；}添加到小提琴中，您将看到它在居中时不起作用；第一行的最后一个项目仍然在右边有边框，我只需要它来分隔项目。它不应该显示在任何一行的末尾或开头。第一行的最后一个项目仍然在右边有边框，我只需要它来分隔项目。它不应该出现在任何一行的末尾或开头。