如何在不更改填充或边距的情况下更改jQuery Mobile按钮中的文本大小

Question

我正在使用css为网格中的一些按钮设置样式，我需要使一些按钮中的文本更小，以使其适合，但不更改边距或填充。

我使用这个css，改变字体大小会使整个按钮的大小略有变化，还会改变填充和边距，使它们在网格上不会以相同的方式排列。

.my_menu_btn{
    text-shadow:none !important;
    border-radius: 10px !important;
    font-size: 0.7em;
    font-weight: bold;
    box-shadow: 0px 1px 3px 1px lightgray;
    height:40px !important;
    box-sizing:border-box !important;
    max-width: 98% !important;
    margin-left:auto;
    margin-right:auto;
}

有没有什么方法可以在不更改其他内容的情况下更改字体。我真的不明白为什么字体大小会改变填充和边距。

Answer 1

jQM CSS中的边距/填充使用单位em而不是像素；em基于当前的字体大小。因此，当字体大小减小时，有效边距也会减小。

您的解决方法是将文本放在按钮内的跨度内，然后更改跨度的字体大小：

<button ><span class="my_menu_btn">some longer text in span</span></button>
.my_menu_btn{
    font-size: 0.7em;
    font-weight: bold;
}

这是演示

您可以将CSS的其余部分应用于按钮：

button{
    text-shadow:none !important;
    border-radius: 10px !important;
    box-shadow: 0px 1px 3px 1px lightgray;
    box-sizing:border-box !important;
    max-width: 97% !important;
    margin-left:auto;
    margin-right:auto;
}