Question

我正在使用此表单：

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

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

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

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

Answer 1

只需在css文件中添加：

.urlbio_icon {
  display: inline-block;
}

angular4 + material：如何显示输入和图标相同的行

1 个答案: