Html 添加内容后内联块定位异常

遇到此问题时，我正在使用内联块元素。下面是元素的预期布局。它只是一张简单的卡片，后面有一个伪元素

预期布局：

.deck列表容器{
背景色：rgba（0,0,100,0.2）；
}
.甲板清单项目{
填料：5pt；
位置：相对位置；
光标：指针；
保证金：10分；
显示：内联块；
背景色：白色；
边界半径：0.8雷姆；
高度：15雷姆；
宽度：10雷姆；
}
.甲板清单项目：之后{
内容：''；
位置：绝对位置；
背景颜色：黄色；
转换：translateY（0.5rem）；
高度：3雷姆；
宽度：2.5雷姆；
右：1rem；
底部：0；
剪辑路径：多边形（50%25%，100%0，100%98%，0 100%，0 0）；
}

---

您需要将

.deck列表项的
垂直对齐
属性设置为
基线
的默认值以外的值。例如，
顶部
：


.deck列表容器{
背景色：rgba（0,0,100,0.2）；
}
.甲板清单项目{
填料：5pt；
位置：相对位置；
光标：指针；
保证金：10分；
显示：内联块；
背景色：白色；
边界半径：0.8雷姆；
高度：15雷姆；
宽度：10雷姆；
垂直对齐：顶部；
}
.甲板清单项目：之后{
内容：''；
位置：绝对位置；
背景颜色：黄色；
转换：translateY（0.5rem）；
高度：3雷姆；
宽度：2.5雷姆；
右：1rem；
底部：0；
剪辑路径：多边形（50%25%，100%0，100%98%，0 100%，0 0）；
}

文本
第一个列表项类是add，您没有提到组列表的样式-add@Soheb很抱歉我认为这不相关。不过，一位同事已经指出了这个问题。谢谢你的提醒。为什么要更改垂直对齐？@frederic，因为内联元素的默认垂直对齐值是基线，这导致对齐问题。它是如何导致对齐问题的？它是如何工作的！你能详细解释一下为什么基线会破坏布局吗。它们不是都具有相同的高度并且适合相同的线框吗。@frederic没有内容的
.deck列表项
元素不会更改其垂直对齐方式，但是添加内容（如我的示例中所示）会使默认基线生效，并在此布局中向下移动它们。您可以阅读所有关于垂直对齐在