Css 使用pseudo:before将flexbox用于导航菜单将其拆分为两行

在我添加：before内容以“|”拆分它之前，使用媒体查询和具有2个断点的flexbox工作正常：

---

如何使其与菜单的其余部分保持一致？

您将链接设置为

块

元素，因此该行为没有任何错误。 从链接中删除块属性并将其重置为

内联块

，以允许

垂直

填充

显示

取消设置：

显示：内联块


ul{
列表样式：无；
保证金：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：柔性端；
字体大小：300；
字号：18px；
}
.导航a{
显示：内联块；
文字装饰：无；
颜色：#F05A24；
填充：14px 16px；
}
.导航a:悬停{
字体大小：400；
颜色：黑色；
}
.导航李+李：之前{
内容：“/”；
}
@介质和全部（最大宽度：820像素）{
.导航{
证明内容：周围的空间；
}
.导航a{
字体大小：120%；
}
#标志{
显示：无；
}
}









您将链接设置为
块
元素，因此该行为没有任何错误。
从链接中删除块属性并将其重置为
内联块
，以允许
垂直
填充

显示
取消设置：

显示：内联块


ul{
列表样式：无；
保证金：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：柔性端；
字体大小：300；
字号：18px；
}
.导航a{
显示：内联块；
文字装饰：无；
颜色：#F05A24；
填充：14px 16px；
}
.导航a:悬停{
字体大小：400；
颜色：黑色；
}
.导航李+李：之前{
内容：“/”；
}
@介质和全部（最大宽度：820像素）{
.导航{
证明内容：周围的空间；
}
.导航a{
字体大小：120%；
}
#标志{
显示：无；
}
}









您可以在每个
li上使用
显示：flex
和
对齐项目：居中


.navigation{
列表样式：无；
保证金：0；
显示器：flex；
柔性包装：包装；
证明内容：柔性端；
字体大小：300；
字号：18px；
}
李{
显示器：flex；
对齐项目：居中；
}
.导航a{
文字装饰：无；
颜色：#F05A24；
填充：14px 16px；
}
.导航李+李：之前{
内容：“/”；
}





您可以在每个
li上使用
显示：flex
和
对齐项目：居中


.navigation{
列表样式：无；
保证金：0；
显示器：flex；
柔性包装：包装；
证明内容：柔性端；
字体大小：300；
字号：18px；
}
李{
显示器：flex；
对齐项目：居中；
}
.导航a{
文字装饰：无；
颜色：#F05A24；
填充：14px 16px；
}
.导航李+李：之前{
内容：“/”；
}





关闭！但它看起来很奇怪，因为/太接近下一个单词。有什么方法可以把它放在中间吗？当宽度正好在断点之前时，它看起来很有趣（），但我想这只是：before的一个限制。谢谢这真的很好，适用于所有最新的浏览器。谢谢@Nenad！接近！但它看起来很奇怪，因为/太接近下一个单词。有什么方法可以把它放在中间吗？当宽度正好在断点之前时，它看起来很有趣（），但我想这只是：before的一个限制。谢谢这真的很好，适用于所有最新的浏览器。谢谢@Nenad！方法不同，但问题与上面相同：它看起来很奇怪，因为/太接近下一个单词。有没有办法把它放在两者之间？@CristianoMaia well give:在BFC使用填充或边距之前，问题在于它是一个块并打破了界限，我回答的重点是解释op似乎在玩flex，但还不知道什么显示行为（或浮动或位置）（尚未涉及；）当宽度刚好在断点之前时，它看起来很有趣（i.imgur.com/RPSqsud.png），但我想这只是：before的一个限制。谢谢我将尝试将|单独作为一个元素（具有固定的宽度），使其具有适当的间距，或者返回到旧的内联模式（无flexbox），文本与中心对齐，字体大小为vw。不同的方法，但与上面相同的问题：它看起来很奇怪，因为/太接近下一个单词。有没有办法把它放在两者之间？@CristianoMaia well give:在BFC使用填充或边距之前，问题在于它是一个块并打破了界限，我回答的重点是解释op似乎在玩flex，但还不知道什么显示行为（或浮动或位置）（尚未涉及；）当宽度刚好在断点之前时，它看起来很有趣（i.imgur.com/RPSqsud.png），但我想这只是：before的一个限制。谢谢我将尝试将|单独作为一个元素（具有固定的宽度），使其具有适当的间距，或者返回到旧的内联模式（无flexbox），文本与中心对齐，字体大小为vw。
.navigation li+li:before {
    content: '/ ';
}