Question

我想提前感谢你，感谢你的时间。我非常感谢你的帮助！

这是我使用Angular 2 Material Design创建的表单。我想知道如何对齐？正如您在下面的快照中所看到的，账单编号高于年份。

以下是代码

<md-card class="bill-form">
<md-toolbar color="warn">
    <md-card-title>{{bill.Type}}</md-card-title>
</md-toolbar>
<md-card-content class="form-content">
    <form>
        <table style="width:100%" cellspacing="0">
            <tr>
            <td>
                <md-select placeholder="Vendor" [(ngModel)]="bill.VendorShortcut" name="VendorShorcut"
                (change)="getVendor(bill.VendorShortcut)">
                    <md-option>
                    </md-option>
                    <md-option *ngFor="let vendor of vendors" [value]="vendor">
                        {{vendor}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Type" [(ngModel)]="bill.Type" name="Type" selected="'Bill'">
                    <md-option [value]="'Bill'">
                        Bill
                    </md-option>
                    <md-option [value]="'Credit'">
                        Credit
                    </md-option>
                </md-select>

            </td>
            <td>
                <md-select placeholder="Month" [(ngModel)]="bill.Month" name="Month" selected="bill.Month">
                    <md-option *ngFor="let month of months" [value]="month">
                        {{month}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Year" [(ngModel)]="bill.Year" name="Year" selected="bill.Year">
                    <md-option *ngFor="let year of years" [value]="year">
                        {{year}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-input-container>
                    <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
                </md-input-container>
            </td>
            <td>
                <md-input-container align="end">
                    <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total">
                    <span md-prefix>$&nbsp;</span>
                    <span md-suffix></span>
                </md-input-container>
            </td>
            </tr>
        </table>

    </form>
</md-card-content>

Answer 1

您应该使用标签而不是在占位符中将其作为

    <td>
        <label class="..."> Bill Number </label>
        <md-input-container>
            <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
        </md-input-container>
    </td>

使用一些引导类

Answer 2

很晚才到这里，但对于使用最新角度材料的人来说，你可能会考虑放弃桌子和放大器。容器和使用angular material-grid-list。

<mat-grid-list>
          <mat-grid-tile class="form-tile">
              Date:
          </mat-grid-tile>
          <mat-grid-tile class="form-tile">
               <input matInput placeholder="Date"  [(ngModel)]="date" name="date">
          </mat-grid-tile>
</mat-grid-list>

您可以指定行高和列数。这个控件的api可以在这里找到：

Grid List

如果您希望在列表中进一步设计样式，请查看以下S-O帖子：

Further style your grid

在上面的示例中，您将使用class form-tile来进一步设置组件的样式。根据我的经验，这提供了一致且整洁的形式体验。

Answer 3

您可以为输入容器提供一个类，并使用CSS

移动它们

HTML

        <td>
            <md-input-container class="align">
                <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
            </md-input-container>
        </td>
        <td>
            <md-input-container class="align" align="end">
                <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total">
                <span md-prefix>$&nbsp;</span>
                <span md-suffix></span>
            </md-input-container>
        </td>

CSS

.align {
  top: 5px;
}

Answer 4

使用材料list：

<mat-list>
 <mat-list-item> <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber"> </mat-list-item>
 <mat-list-item> <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total"> </mat-list-item> 
</mat-list>

角度2材质形式元素水平对齐

4 个答案: