0

通常、私は CSS にかなり精通しており、そのほとんどを理解することができますが、これには困惑しています。

基本的に、このウィジェットでは、[ここをクリック] ボタンのテキストを上に移動して、そのテキストの上下に (赤いボックスに対して) 均等な間隔ができるようにする必要があります。

HTML: 

<button onclick="setLocation('amplifiers/pioneer-appradio-2-sph-da100.html/index.htm')" class="button btn-cart" title="Shop NOW" type="button">
<span><span>Click Here</span>

CSS:

.banner button {
    float: right;
    margin-top: 25px;
    margin-right: 40px;
}
.banner button span {
    background: transparent url(../images/media/slider_button_bg.png) 0 0 no-repeat!important;
    height: 24px;
    padding-left: 12px;
}
.banner button span span {
    background-position: 100% 0!important;
    padding-left: 0;
    padding- right: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

問題の Web サイトはhttp://foscam-uk.com/index.phpです。

助けてくれてありがとう。

4

4 に答える 4

3

コードをうまく動作させることができません (CSS の残りの部分から何かが欠けている可能性があると思います)。line-heightただし、コンテナーの高さと同じ (この場合は 24px) を設定することで、中央に配置できるはずです。

于 2012-06-12T16:48:21.977 に答える
1

ここに貼り付けたもの以外に、ページで使用されている別のスタイルがあり、ボタン テキストの垂直方向の配置がその位置になります。

button.btn-cart span （styles.cssの203行目）にはline-height:31px;

テキストの配置を修正するために、その行の高さを減らします (私のローカル テストでは 25 ピクセルが適切に見えました)。

于 2012-06-12T17:04:50.783 に答える
1

そのためにスパンを使用する必要はありません。無駄な http リクエストを減らすため、css だけでボタンの背景を作成してみてください。

    <button onclick="setLocation('speakers/pioneer-ts-g172ci.html/index.htm')" 
    class="button btn-cart" id="thisPartButton" title="Shop NOW" type="button">
Click Here</button>

そして、この特定のボタンのCSSを作成できます

#thisPartButton{
color:white;
background:#CE0B08;  //replace it with your image
padding:7px;
}
于 2012-06-12T16:54:29.127 に答える
0

テキスト付きのスパンを相対的に指定して、適切な座標に配置することはできませんか?

またはマージントップ/マージンボトム？

それ以外の場合、垂直方向の配置については、こちらを試してください。

于 2012-06-12T16:48:09.810 に答える