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基于当前的font-size。因此，当缩小font-size时，有效边距也是如此。

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

<button ><span class="my_menu_btn">some longer text in span</span></button>

.my_menu_btn{
    font-size: 0.7em;
    font-weight: bold;
}

这是 DEMO

您可以将其余的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;
}

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

1 个答案: