3

大きなフォントサイズの h1 がある Web サイトを作成しています。私がやろうとしているのは、テキストの上部に配置された上付き文字を作成することですが、何をしても、適切に配置されません。

これが私が取り組んでいることのプランクです！ http://plunker.co/edit/gnS915O9PVAe9VKktqFh?p=preview

このプランクでは、「TM」を ACME の上付き文字にしようとしています。ただし、

マークアップはこれです：

  <h1>
    acme
    <sup>TM</sup>
  </h1>

スタイルは次のとおりです。

  body {
    padding: 60px;
    font-size: 10px;
  }
  h1 {
    font-size: 12em;
    text-transform: uppercase;
    line-height: 1em;
  }

  h1 sup {
    font-size: .1em;
    vertical-align: super;
  }
4

3 に答える 3

5

垂直方向の配置と行の高さを設定します。

 h1 sup {
    font-size: .1em;
    vertical-align: top;
    line-height: 35px;
    margin-left: -30px;  
  }

負のマージンで sup を左に押すように答えを更新しました。

プランカー: http://plnkr.co/T45y7ob43mdNY3fvC73S?p=preview

于 2013-04-08T20:13:20.140 に答える
2

Chromium 24 / Ubuntu 12.10でこれを（まったく）機能させる唯一の方法は、次を使用することです。

h1 sup {
    position: relative;
    display: inline-block;
    font-size: .1em;
    top: -2em;

}

(分岐したと思います) Plunker demo .

于 2013-04-08T20:22:12.897 に答える
1

acme の後の余分な改行により、次の行に折り返されています...分岐した PLUNKERを参照してください

  <h1>
    acme<sup>TM</sup>
  </h1>
于 2013-04-08T20:14:27.223 に答える