材料設計建興按鈕大小調整

我正在使用Google Material Design Lite CSS庫（https://getmdl.io/components/#buttons-section），即使使用內聯樣式，我似乎也無法更改按鈕大小。材料設計建興按鈕大小調整

這是我試圖使用按鈕：

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> 
    <i class="material-icons">add</i> 
</button>

我試圖加內嵌這樣的代碼，但它不工作：

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px""> 
    <i class="material-icons">add</i> 
</button>

任何人有任何想法如何更改按鈕的大小在MDL中？

來源

2017-05-26 chiaychang

在線尺寸爲我工作。 https://jsfiddle.net/addotk1g/ –

「寬度」和「高度」的樣式設置適用於我 –

.mdl-button和.mdl-button--fab類都有min-width樣式，這就是爲什麼您的寬度40px不起作用。你只需要重寫min-width風格。此代碼將工作：

<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" style="width: 40px; height: 40px; min-width: initial;"> 
    <i class="material-icons">add</i> 
</button>

當然最好是分開你的風格，就像這樣：

#myButton { 
 
    width: 40px; 
 
    height: 40px; 
 
    min-width: initial; 
 
}

<!-- Load the MDL stylesheet --> 
 
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/> 
 

 
<button id="myButton" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> 
 
    <i class="material-icons">add</i> 
 
</button>

來源

2017-05-26 23:22:13

材料設計建興按鈕大小調整

回答

相關問題