2

我想使用 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;
}

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

4

1 回答 1

0

为了使元素好像sup不存在，您需要将它们从文档流中取出。我已经通过使用position: absolute. （神奇的部分来了。）为了让这些元素定位在内容附近，你要确保它们的包含元素（the p）也有一个定位上下文——position: relative在这种情况下。

这是CSS：

p {
  position: relative;
}

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

请注意，为了简单起见，我删除了一些东西，只是sup直接设置元素的样式，而不是使用它们的类。

于 2013-07-26T00:45:45.483 回答