0

送信ボタンの上の余分なパディングを取り除くことができません。高さの調整から、行の高さ、パディング、マージンまで、すべてを試しましたが、何もうまくいかないようです。基本的に、フィールドの下部に表示される「go」テキストの代わりに、中央に配置したいのですが、その方法がわかりません。

CSS:

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700);

input[type=submit] {
    background: #CDA91B;
    border: 0;
    color: #FFF;
    font-family: "Libre Baskerville", Libre Baskerville, Times New Roman, Times, serif;
    font-size: 20px;
    font-weight: 700;
    height: 25px;
    margin: 0;
    padding: 0;
    text-transform: lowercase;
    vertical-align: top;
    /* css3 */
    -webkit-transition: background 0.25s;
    -moz-transition: background 0.25s;
    -ms-transition: background 0.25s;
    -o-transition: background 0.25s;
    transition: background 0.25s;
}

    input[type=submit]:hover {
        background: #E5BE1E;
        cursor: pointer;
    }

デモ：

http://jsfiddle.net/Y3Pfj/

更新: 私はそれがフォントの一部であることを理解しています.「パディング」を使用して領域を説明しました. 明らかに、実際にはパディングではありません。

さらに、ボタンは現在と同じ高さである必要があります。残念ながら、背景画像を作成する必要があるのではないかと考え始めています。

4

3 に答える 3

4

これはパディングではなく、テキストによって作成された領域の一部です。これは、仕様を無効にすると表示されますtext-transform: lowercase;。

そのテキストをボタン内に表示する必要がある場合は、別の要素を追加してから、テキストを 0.5 em ほど上に配置してみてください。

于 2013-05-14T19:55:09.023 に答える
1

ボタンに設定した静的な高さを削除します。代わりにパディングを使用し、上部のパディングにはより低い値を使用してください。

padding: 0 0 5px;

使用している他の CSS に加えて、25 ピクセルの高さのボタンを提供する必要があります。おそらく最もクリーンなソリューションではありませんが、少なくとも簡単な回避策です。

于 2013-05-14T20:00:09.063 に答える
0

これを試して。行の高さとパディングを追加しました

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:700);

 input[type=submit] {
background: #CDA91B;
border: 0;
color: #FFF;
font-family: "Libre Baskerville", Libre Baskerville, Times New Roman, Times, serif;
font-size: 20px;
font-weight: 700;
line-height: 12px;
margin: 0;
padding: 25px;
text-transform: lowercase;
/* css3 */
-webkit-transition: background 0.25s;
-moz-transition: background 0.25s;
-ms-transition: background 0.25s;
-o-transition: background 0.25s;
transition: background 0.25s;
   }

input[type=submit]:hover {
    background: #E5BE1E;
    cursor: pointer;
}
于 2013-05-14T19:56:46.457 に答える