如何调整角度材料md-input的长度答案

【问题标题】：how to adjust the length of angular material md-input如何调整角度材料md-input的长度
【发布时间】：2017-04-02 12:25:51
【问题描述】：

如何调整 md-input 组件的长度？ size/width 属性似乎不起作用。在下面的示例中，我试图使楼层单元的长度与块号相同

<md-list-item>
    <md-input [(ngModel)]="customer.custEmail" name="custEmail" type="text" placeholder="Email address"></md-input>
</md-list-item>
<md-list-item>
    <md-input [(ngModel)]="customer.custDisplayName" name="custDisplayName" type="text" placeholder="Display Name"></md-input>
</md-list-item>
<md-list-item>
    <md-input [(ngModel)]="customer.addressPostal" name="addressPostal" type="number" placeholder="Postal Code"></md-input>
</md-list-item>
<md-list-item>
    <md-input [(ngModel)]="customer.addressBlk" name="addressBlk" type="number" placeholder="Block No."></md-input>
</md-list-item>
<md-list-item>
    <md-input [(ngModel)]="customer.addressStreet" name="addressStreet" type="number" placeholder="Street"></md-input>
</md-list-item>
<md-list-item>
   <md-input [(ngModel)]="customer.addressFloor" name="addressFloor" type="number" placeholder="Floor" size="4"></md-input> - 
   <md-input [(ngModel)]="customer.addressUnit" name="addressUnit" type="number" placeholder="Unit" size="4"></md-input>
</md-list-item>

</md-list>

【问题讨论】：

呃..基本上是显示的输入字段

标签： angularjs angular-material angular-material2

【解决方案1】：

我也在为 ng2 材料设计元素的样式而苦苦挣扎，但我找到了一种方法来克服这个问题。只需将类添加到md-list-element 并设置该类的样式。就这样：

<md-list-item class="same-width">
    <md-input [(ngModel)]="customer.custEmail" name="custEmail" type="text" placeholder="Email address"></md-input>
</md-list-item>
<md-list-item class="same-width">
    <md-input [(ngModel)]="customer.custDisplayName" name="custDisplayName" type="text" placeholder="Display Name"></md-input>
</md-list-item>

在css中

.same-width {
  width: 300px;
}

其他选项是通过material-customization修改md-list-item元素。

【讨论】：

是的，我知道这一点，但是当您需要支持多个屏幕尺寸时使用像素是不好的.. :(

【解决方案2】：

我没有使用 Angular Material 2，但“尺寸”属性似乎对我有用

  <md-list-item>
     <md-input-container>
         <label>Inputfield</label>
         <input type="text" ng-model="color" size="10">
     </md-input-container>
  </md-list-item>

【讨论】：