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 可能会有些棘手。