Question

我正在使用Google Material Design Lite CSS库（https://getmdl.io/components/#buttons-section），即使使用内嵌样式，我似乎无法更改按钮大小。

这是我尝试使用的按钮：

#include <vector>

std::vector<Quelle> Scattering::position(const double &dist, const double &elev, const double &azim, const double &intensity) 
{ 
    double intensity_pos = intensity * 10 * 5;
    double lower_elev = elevation-intensity_pos;
    double upper_elev = elevation+intensity_pos;
    double lower_azim = azim-intensity_pos;
    double upper_azim = azim+intensity_pos;

    //create instances
    std::vector<Quelle> ret_val;

    ret_val.push_back(Quelle(dist,upper_elev,lower_azim)); // upper left
    ret_val.push_back(Quelle(dist,upper_elev,upper_azim)); // upper right
    ret_val.push_back(Quelle(dist,lower_elev,lower_azim)); // lower left
    ret_val.push_back(Quelle(dist,lower_elev,upper_azim)); // lower right

    return ret_val;
}

我尝试添加这样的内联代码，但它无效：

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

任何人都知道如何在MDL中更改按钮大小？

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>

当然最好将你的风格分开，如下：

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

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
}

Material Design Lite按钮大小调整

2 个答案: