html - CSSのテキストサイズに応じて角丸ボタンの幅を動的に大きくするにはどうすればよいですか?

Question

CSSのテキストサイズに応じて角丸ボタンの幅を動的に大きくするにはどうすればよいですか?

テキストサイズのベースが異なる10個の丸い角のボタンがあります。解決策は、ボタンのサイズがテキストサイズに基づいて動的に増加することです....

HTMLとCSSを使用してこれを解決する方法、またはスクリプト言語を使用して解決する方法はありますか。

ヘルプ..、

Answer 1

jsfiddleの動作を確認するには：http：//jsfiddle.net/XAU8V/

HTML：

<div class="container">
    <a href="#" class="button small">Small</a>
    <a href="#" class="button medium">Medium</a>
    <a href="#" class="button large">Large</a>
</div>​

CSS：

.button {
   border: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 5px 30px;
   color: white;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   -webkit-border-radius: 1em;
   -moz-border-radius: 1em;
   border-radius: 1em;
}

.small {
    font-size: 14px;
}
.medium {
    font-size: 20px;
}
.large {
    font-size: 30px;
}

境界線の半径は「em」であるため、親の値に関連しています（この例では実際には親ではありませんが）。Emは、継承のために少し注意が必要です。