Question

我想使用CSS移动上标数字使它们直接浮动在文本上方而不是侧面，但我不希望它在周围文本上创建边距。

我尝试过使用负边距，但是如果上标不是相同的数字/大小，它会搞砸一切。

我希望他们像这样冲洗：70/80/90/100/110

这是我的HTML：

70/80<sup class="buffSup">-5</sup>/90<sup class="buffSup">-10</sup>/100<sup class="buffSup">-15</sup>/110<sup class="buffSup">-20</sup>

这里和CSS一样接近：

.buffSup {
    display: inline;
    position: relative;
    color: green;
    font-weight:bold;
    left: -1.18em;
    top: -1.2em;
    font-size: 73%;
    margin-left: -0.45em;
    margin-right: -0.59em;
}

我也很乐意为更好的方法实现这一目标，但内容不会是静态的。

Answer 1

为了使sup元素永远不存在，您需要将它们从文档流中取出。我使用position: absolute完成了这项工作。（这是神奇的部分。）为了让这些元素保持在内容附近，你要确保它们的包含元素（p）也有一个定位上下文 - 在这种情况下是position: relative。

这是CSS：

p {
  position: relative;
}

sup {
  position: absolute;
  top: -1em;
  color: green;
  font-weight:bold;
  font-size: 73%;
}

请注意，为了简单起见，我删除了一些内容，并直接设置了sup元素，而不是使用他们的类。

我可以给上标什么属性，以便它不会影响/影响其他文本，无论我在哪里移动它？

1 个答案: