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可能会变得有点棘手。

如何动态增加圆角按钮宽度取决于CSS中的文本大小？

1 个答案: