材料设计轻量级按钮尺寸

Question

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

- chiaychang

---

内联尺寸对我有效。https://jsfiddle.net/addotk1g/ - Sean Gregory

那个width和height的样式设置对我有效。 - at.

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

当然，最好分离样式，如下所示：

当你将CSS和HTML分开时：

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

- Erik Koopmans

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

- Mostafa