Question

我在这支笔上重现了我的问题： https://codepen.io/brennerp/pen/wOEebK

.example {
  margin-right: 100px;
  height: 100px;
  max-width: 130px;
  
  font-size: 16px;
  line-height: 24px;
  
  white-space: normal;
  word-break: break-word;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: calc(50% - 8px);
  right: -21px;
  
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: blue;
}

<div class="example">
    <span>
      <span class="relative">
        <span class="relative__label">
          Wrong one asdsdasadsadsdasadas ts asdsadasdasdsadsajdkhsdjahas
        </span>
        <div class="absolute"></div>
      </span>
    </span>
</div>

我想拥有任意大小的文本，并在其末尾绝对放置一个元素，而与文本的大小无关。我有一个相对位置的内联元素，其中有两个子元素：一个内联元素及其文本，另一个是绝对位置的元素，其顶部为0和右侧为0。

就像“正确的测试[...]”示例一样，蓝色的小圆圈在末尾并与文本的中间对齐。但是，绝对元素的“正确”属性似乎尊重“更小线条”之一。换句话说，如果为“ right：0;”，则绝对元素不会到达相对元素的右端，而是到达较小的一行之一的末尾，就像“错误的[...]”例。这不是我想要的。我希望它尊重相对元素的大小，就像我强制使用CodePen一样。

有人知道“正确”属性遵守最小线条而不是相对元素宽度的原因吗？内联元素是如何工作的？是否有我想要的解决方案：尊重文本元素结尾的绝对元素，无论其宽度为20px还是300px（就像我放置的示例一样）？

CSS：相对于内联多行元素的绝对元素

0 个答案: