Question

我想显示一些背景图片和一些文字。所有内容都应该用.find('.slick-dots li').filter(function(i,e){ return (i % 3 != 0); }).hide();（管道）来划分，以分隔元素。

管道包含在|选择器中，管道作为内容。然而，这似乎打破了布局，因为背景图像现在不再与文本在同一行上。如果我完全删除内容，它会按预期工作。

这是什么原因以及如何解决？

我创建了一个小Fiddle as example。

Answer 1

为什么会这样？

查看此Image。技术上::before是li(.list-piped)的一部分，占据整个宽度，将子项（图标）推到底部。

如何解决？

将::before应用于子元素或将position: absolute用于当前代码。

Answer 2

您的布局使用float: left，因此:before应遵循相同的规则。例如：

.list-piped:before {
    display: block; /* fix */
    float: left; /* fix */
    content: "|"; /* This breaks the layout */
}

顺便说一句，下面的Manoj Kumar描述了真正的问题。我的答案是一个可能的解决方案，因为float: left以及position: absolute都有自己的流程。