html - CSS背景画像の上にテキストを重ねる方法

Question

友達のボタンを作ってほしいと依頼されたのですが、テキストが正しい位置にとどまるようにできませんでした。

ここに私のHTMLコードがあります

<div id="sign-in-button">
    <p>Sign-in</p>
</div>

ここに私のCSSコードがあります

#sign-in-button{
    height: 20px;
    width: 60px;
    background-color: orange;
    background-image: url(external_links_icon.png);
    background-position: right;
    background-repeat: no-repeat;
    border:1px solid gray;
    border-radius: 5px;
    position: absolute;
}

Sign-In という単語がオレンジ色のブロック内にないことに気付いたかもしれません。どなたか解決策をご存知ですか？

Answer 1

これは p タグが原因です。代わりに span タグを使用してみてください。

<div id="sign-in-button">
  <span>Sign-in</span>
</div>