添加内容后行内块定位异常

Question

当我遇到这个问题时，我正在处理行内块元素。下面是元素的预期布局。它只是简单的卡片，其后绝对放置一个伪元素。

预期布局：

.deck-list-container{
  background-color: rgba(0, 0, 100, 0.2);
}

.deck-list-item {
  padding: 5pt;
  position: relative;
  cursor: pointer;
  margin: 10pt;
  display: inline-block;
  background-color: white;
  border-radius: 0.8rem;
  height: 15rem;
  width: 10rem;
}

.deck-list-item:after {
  content: '';
  position: absolute;
  background-color: yellow;
  transform: translateY(0.5rem);
  height: 3rem;
  width: 2.5rem;
  right: 1rem;
  bottom: 0;
  clip-path: polygon(50% 25%, 100% 0, 100% 98%, 0 100%, 0 0);
}

<div class="deck-list-container">
  <div class="deck-list-add"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
</div>

但是，出于某种原因。 当我在 div. 中添加一个元素时布局中断我已经分析 chrome 开发工具来解决这个问题很长时间了，但看起来我卡住了。有人知道发生了什么事吗？

问题：

我试过以下方法：

删除 :after 伪元素
添加框大小调整：边框框
删除位置：相对

Answer 1

您需要将 .deck-list-item 的 vertical-align 属性设置为默认值 baseline 以外的值。例如。 top:

.deck-list-container{
  background-color: rgba(0, 0, 100, 0.2);
}

.deck-list-item {
  padding: 5pt;
  position: relative;
  cursor: pointer;
  margin: 10pt;
  display: inline-block;
  background-color: white;
  border-radius: 0.8rem;
  height: 15rem;
  width: 10rem;
  vertical-align:top;
}

.deck-list-item:after {
  content: '';
  position: absolute;
  background-color: yellow;
  transform: translateY(0.5rem);
  height: 3rem;
  width: 2.5rem;
  right: 1rem;
  bottom: 0;
  clip-path: polygon(50% 25%, 100% 0, 100% 98%, 0 100%, 0 0);
}

<div class="deck-list-container">
  <div class="deck-list-add"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item">text</div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
  <div class="deck-list-item"></div>
</div>

添加内容后行内块定位异常

Abnormal inline-block positioning after adding content

html

css

inline