12

したがって、サイト全体のさまざまなボタンに同じスタイルを適用する基本的なボタン クラスがあります。

フォーム入力とアンカータグを並べて配置する必要があり、高さと幅が異なります。違いを示すために、内側のボタンのテキストをそれぞれ同じにしました（明らかに、2つの「追加」ボタンが隣り合っている必要はありません:P）

内容が変わるので、CSSで幅や高さを指定したくありません。フォントも若干サイズが違うように見えますし、ボックスモデルから見るとパディングも問題ないように見えます。

http://jsfiddle.net/aeD4Z/2/

マークアップ

<form id="" method="POST" action="">
<input class="button" type="submit" name="submit" value="Add">
</form>

<a class="button" href="">Add</a>

CSS

.button {
    font-family: Arial;
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent;
    border: 1px solid #F07605;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    outline: medium none;
    padding: 5px 8px !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

編集：以下に示すように、パディングではありません.firebugのボックスモデルは、パディングがそれぞれ同じであることを示しているため、実際の要素自体と関係があります

入力とアンカーのボックス モデル

上記の js フィドルで単一の CSS クラスから両方を同じサイズにするにはどうすればよいですか?

4

3 に答える 3

0

パディングは、ボタンとアンカーに異なる方法で適用されます。これは事実としてはわかりませんが、ボタンは、リンクがテキストとしてレンダリングされるボタンのように見えるように、その値の周囲にもう少しスペースを確保していると思います。

あなたはこれを試すかもしれません：

a {
   padding-top:5px !important;
   padding-bottom:5px !important;
   padding-left:0px !important;
   padding-right:0px !important;
}

これは正確に同じサイズではありませんが、かなり近いです。

于 2013-02-27T13:04:21.830 に答える