angular4+material：如何在同一行显示输入和图标答案

【问题标题】：angular4+material : how to display an input and an icon same lineangular4+material：如何在同一行显示输入和图标
【发布时间】：2018-05-20 20:17:29
【问题描述】：

我正在使用这个表格：

我希望图标与输入在同一行。

对于姓名和名字，它在用 div 包围它们时起作用。我还没有找到在 .css 中添加什么来实现 URL。你知道怎么做吗？

请注意，姓名和名字输入不会占用整行。我不知道为什么。有什么想法吗？

.mat-card {
  width: 450px;
  margin: auto;
  margin-top: 50px;
}
form {
  display: flex;
  flex-direction: column;
}

.cardtitle {
  font-size: 20px;
}

.mat-input-container {
  margin-bottom: .3em;
}

.img_portrait {
  margin-left: auto;
  margin-right: auto;
}
.urlbio {
  width: 350px;
}
.urlbio_icon {
   style: inline-block;
}

<mat-card>

  <mat-card-header>
    <mat-card-title class="cardtitle"> {{ formTitle }} </mat-card-title>
  </mat-card-header>

  <mat-card-content> <!-- {{{ -->

    <form [formGroup]="editAuthorForm" (ngSubmit)="editAuthor()">

      <div> <!-- {{{ Prénom Nom -->
        <mat-input-container>
          <input matInput type="text" placeholder="Prénom" formControlName="firstname" >
        </mat-input-container>
        <mat-input-container>
          <input matInput type="text" placeholder="Nom" formControlName="name" >
        </mat-input-container>
      </div> <!-- }}} -->
      <div> <!-- {{{ Dates -->
        <mat-input-container>
          <input matInput type="text" placeholder="Né(e) le" formControlName="birthdate" >
        </mat-input-container>
        <mat-input-container>
          <input matInput type="text" placeholder="Décédé(e) le" formControlName="deathdate" >
        </mat-input-container>
      </div> <!-- }}} -->
      <!-- {{{ Portrait -->
      <mat-input-container>
        <input matInput type="text" placeholder="Lien portrait" formControlName="urlimg" >
      </mat-input-container>
      <div *ngIf="(imgToDisplay$ | async) as img"  class="img_portrait">
        <img src="{{ img }}" height="150px">
      </div> <!-- }}} -->
      <!-- {{{ bio -->
       <div>
       <mat-input-container class="urlbio">
        <input matInput type="text" placeholder="Lien biographie" formControlName="urlbio" class="urlbio">
       </mat-input-container>
       <div *ngIf="(urlToDisplay$ | async) as url" class="urlbio_icon" >
        <a href="{{ url }}" target="urlbio" ><mat-icon>launch</mat-icon></a>
      </div>
      </div>
      <!-- }}} -->

      <!-- {{{ Boutons -->
      <mat-card-actions style="text-align:center;">
        <button mat-raised-button color="primary" style="margin:auto" type="submit" [disabled]="!editAuthorForm.valid"> Enregistrer </button>
        <button mat-raised-button style="margin:auto" type="button" (click)="cancelEditing()"> Annuler </button>
      </mat-card-actions> <!-- }}} -->

    </form>

  </mat-card-content> <!-- }}} -->

</mat-card>

【问题讨论】：

标签： angular forms angular-material angular-material2

【解决方案1】：

只需将其添加到 css 文件中：

.urlbio_icon {
  display: inline-block;
}

【讨论】：