Material Design Lite 按钮大小答案

【问题标题】：Material Design Lite button sizingMaterial Design Lite 按钮大小
【发布时间】：2017-10-27 19:03:11
【问题描述】：

我正在使用 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 中更改按钮大小吗？

【问题讨论】：

内联尺寸适合我。 jsfiddle.net/addotk1g
width 和 height 的样式设置适合我

标签： css material-design

【解决方案1】：

.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>

【讨论】：

【解决方案2】：

这对我有用。

button.my-button {
width: 47px;
height: 30px;
min-width: initial;
padding: 0px 0px; //give me more space
font-size: 13px;
line-height: 0px; //make text middle vertically
}

【讨论】：