1

ボタンをHTMLで次のように表示したいのですが。

<a href="page.html" class="button">Link</a>

また、ボタンクラスは次のとおりです。

.button { background:url("button_bg.png"); height:33px; display:inline-block; font-size:18px; }
.button:before { display:inline-block; content:""; width:23px; height:33px; background:url("button_before.png"); }
.button:after { display:inline-block; content:""; width:23px; height:33px; background:url("button_after.png"); }

ただし、これには2つの問題があります。

  1. 「前」と「後」はそれぞれの背景を表示したいのですが。現在、「ボタン」クラスの上に背景を表示しています。
  2. テキストは下部に配置されます。中央に揃える最良の方法を知りたいのですが。ボタンの高さを知っていることを考えると、これはCSSでも可能だと確信していますが、私もそれに苦労しています。

もう1つ注意すべき点があります。「前」と「後」をハイパーリンクの一部にしたいと思います。DIVを使用して、これらの「前」および「後」の画像を表示することは可能ですが、ハイパーリンクとは別になります。

4

1 に答える 1

0

これを行うと、ハイパーリンクの一部としてこれらの画像を追加できます

サンプルHTML

<a href="#">
<i class="first-image"></i> /**USE BACKGROUND IMAGE HERE**/
<span class="link-text"></span>
<i class="second-image"></i> /** USE BACKGROUND IMAGE HERE**/
</a>

テキストを垂直方向に中央揃えするには、

height:33px;タグで使用し、そのdisplay:inline-block; とを設定しますline-height:33px;

于 2012-07-15T18:45:22.420 に答える