0

ボタンとアンカータグは同じボタンスタイルですが、場所が異なるため、次のcssを使用してスタイルを設定します。だから私は彼らに同じCSSを与えて、両方がまったく同じようにレンダリングされるようにしようと思いました。ただし、button.enterではテキストが押し下げられています。最初のものは正常に動作します。padding：0で機能しますが、最初のものに影響します。何か案は？

a.enter, button.enter {
    text-decoration: none;
    background: url('../img/enter-button_small.png') no-repeat 0px 0px;
    height: 35px;
    padding: 8px 0;
    text-align: center;
    color: white;
    margin: 0 auto;
    text-shadow: none;
    font-size: 16px;
    width: 300px;
    vertical-align: middle;
    }
4

2 に答える 2

5

ボタンだけでパディングをリセットする別のスタイルを追加するだけです。一部の CSS も不要です。vertical-align:middle;たとえば、この場合は何もしません。 

a.enter, button.enter {
    text-decoration: none;
    background: url('../img/enter-button_small.png') no-repeat 0px 0px;
    height: 35px;
    padding: 8px 0;
    text-align: center;
    color: white;
    margin: 0 auto;
    text-shadow: none;
    font-size: 16px;
    width: 300px;
}

button.enter {
    padding:0;
}
于 2012-09-04T11:40:37.680 に答える
0

0 coz ボタンにはデフォルトのマージンとパディングがあるため、マージンとパディングについて言及する必要があります。

これを以下のコードに追加します

a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}​

これが動作中のデモですhttp://jsfiddle.net/6Ygc2/

于 2012-09-04T11:42:51.617 に答える