并排显示两个输入

Question

可以并排写两个输入吗？我正在使用Angular的matInput形式，我无法将第二个输入带到第一个旁边。

我想要显示的是：“input1，input2”在同一行。这是我的代码。

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
  </form>
</div>

Answer 1

您的表的问题是您将2列分别放入2行而不是1行中的2列，请尝试这样：

<table>
 <tr>
  <td>1st column</td>
  <td>2nd column</td>
 </tr>
</table>

所以这种情况下，第一列将在第二列旁边内联。

Answer 2

试试这个。

<div *ngIf="data.mod=='goLocation'" class="panel-body">
        <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
            <table>
                <tr>
                    <td>
                        <mat-form-field>
                            <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                   #lon="ngModel" ngModel required>
                            <mat-error *ngIf="lon.touched && lon.invalid">
                                <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                     <td>
                        <mat-form-field>
                            <input matInput placeholder="Latitude(Y)" name="lat" id="lat"
                                   #lat="ngModel" ngModel required>
                            <mat-error *ngIf="lat.touched && lat.invalid">
                                <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                </tr>

            </table>
            <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
        </form>
    </div>

Answer 3

 <div *ngIf="data.mod=='goLocation'" class="panel-body">
            <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
                <table>
                    <tr>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                       #lon="ngModel" ngModel required>
                                <mat-error *ngIf="lon.touched && lon.invalid">
                                    <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Latitude(Y)" 
                                       name="lat" id="lat"
                                       #lat="ngModel" ngModel required>
                                <mat-error *ngIf="lat.touched && 
    lat.invalid">
                                    <div *ngIf="lat.errors.required">Bu 
    alanı boş geçemezsiniz.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                    </tr>
                    <tr>
                        
                    </tr>
                </table>
                <button [disabled]="!f.valid" class="btn btn-outline-
    primary">Git</button>
            </form>
        </div>

Answer 4

尝试将button的td包装成单个tr。

堆栈代码段

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Bu alanı boş geçemezsiniz.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Git</button>
  </form>
</div>