有没有办法缩小 Material Design (AngularJS) <md-input> 元素?

Posted

技术标签:

【中文标题】有没有办法缩小 Material Design (AngularJS) <md-input> 元素?【英文标题】:Is there a way to scale down the Material Design (AngularJS) <md-input> element? 【发布时间】:2015-05-22 12:14:09 【问题描述】:

我正在使用&lt;md-input&gt; 标签,但它的高度太高了。有没有办法让它变小?

我现在拥有的是这样的:

<md-content flex class="md-padding" style="font-size:1.2em; max-width:90px; ">
  <md-input-container>
    <label>X</label>
    <input ng-model="motionAbsX">
  </md-input-container>
</md-content>

所以第一行是那个大小,因为&lt;md-input&gt;。它是 34px x 121px 所以我想降低它的高度。我尝试使用它的最大高度,但我得到的只是一个滚动条:

是否可以更改其高度或继承给元素?缩小是可以接受的,但我还没有找到办法。

【问题讨论】:

【参考方案1】:

使用行高属性。根据需要更改行高。

<md-input-container style="line-height:8px">
   <label>abc</label>
   <input ng-model="abc" type="text"/>
</md-input-container>

【讨论】:

谢谢。我还删除了为元素添加填充的“md-padding”类,现在它可以工作了。

以上是关于有没有办法缩小 Material Design (AngularJS) <md-input> 元素?的主要内容,如果未能解决你的问题,请参考以下文章

Android Material Design UI 和没有 Material Design 的 Android UI 有啥区别?

npm安装material-design-icons总是失败

Material Design 没有样式化警报对话框

如何协调 Font-Awesome 和 Material Design 图标字体?

AngularJS Material Design 没有 Animations 支持,如何实现?

Material Design Slide Toggle 没有 event.StopPropagation,我应该用啥?