如何更改jQuery Mobile按鈕中的文本大小，而不更改填充或邊距？

我使用CSS來設計網格中的某些按鈕，並且我需要在某些按鈕中使文本變小以適應它，但不更改邊距或填充。如何更改jQuery Mobile按鈕中的文本大小，而不更改填充或邊距？

我使用這個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; 
}

有什麼方法可以改變字體而不會改變別的東西。我真的不明白爲什麼字體大小會改變填充和邊距。

來源

2014-10-31 Subjective Effect

字體大小不會改變填充或邊距，它們是相同的只是字體佔用較少的空間和元素越來越小:)嘗試使用行高保持相同的高度:) – 2014-10-31 14:04:00

行高獲得按鈕的大小相同按鈕底部和下一個頂部之間的距離肯定會受到影響。 – 2014-10-31 14:22:23

舉一個小例子來代替您的代碼，我們可以幫助您更多:) – 2014-10-31 14:29:57

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; 
}

這裏是一個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; 
}

來源

2014-10-31 14:43:17 ezanker

謝謝！我知道這不在我的腦海！ – 2014-10-31 15:24:45

如何更改jQuery Mobile按鈕中的文本大小，而不更改填充或邊距？

回答

相關問題