是否更改jQuery UI按钮大小？
是否更改jQuery UI按钮大小？
提问于 2010-08-01 11:06:57
我一直在我的页面上使用jQuery UI按钮，但是我还没有找到解决这个看似简单的问题的方法。我希望我的一些按钮比其他的小，这应该和设置按钮文本的CSS一样简单，比如，font: .8em; than UI接受你的DOM元素并包装它：
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Button Label</span>
</button>因此，如果我有一个<button class="small-button">Small button!</button>，jQuery会将文本放在一个子跨度中。指定给small-button类的任何字体大小都将被忽略。
肯定有一种方法可以绕过这个问题，而不会影响jQuery的按钮制作方式。有什么想法吗？
回答 10
Stack Overflow用户
回答已采纳
发布于 2010-08-01 11:15:45
如果直接使用font-size设置ui-button-text的样式，您可以通过应用!important在更高的级别覆盖它。例如：
.small-button {
font-size: .8em !important;
}编辑:尝试直接在.ui-button-text上设置CSS样式以继承：
.ui-button-text {
font-size: inherit !important;
} 这也应该使.small-button上的!important变得无关紧要。
Stack Overflow用户
发布于 2011-03-05 00:30:19
这帮助我降低了按钮的高度(平滑度主题的默认值是1.4的行高)：
.ui-button .ui-button-text
{
line-height: 1.0;
}Stack Overflow用户
发布于 2012-07-23 07:55:54
这是我在我的网站中用来设置字体大小的方法，这样我的按钮大小就和jQuery UI website上的一样了。这之所以有效，是因为jQuery UI website就是这么做的！
/* percentage to px scale (very simple)
80% = 8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/
body
{
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
}通过设置与body元素类似的font-size属性，将其他所有内容的font-size设置为100% = 10px变得非常简单。
只需注意使用百分比时的级联效应-子元素的100%将等于父元素的字体大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3380580
复制相关文章
相似问题