Question

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

我想展示的是：＆＃34; input1，input2＆＃34;在同一行。这是我的代码。

＆＃13;

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

＆＃13;

Answer 1

尝试将button的{{1}}包装成一个td。

Stack Snippet

tr

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

   var table = $('#table').DataTable({
     "ajax": {
            "url": "data/table.json",
            "dataSrc": "",
        },

      "columns": [
            {
                "data": "id"
            },
            {
                "data": "name"
            },
            {
                "data": "age"
            }
        ],
       initComplete: function () {
          $(".mytext").on("click", function () {
             alert("something happens");
          });
      },
    });

Answer 4

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

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

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

并排显示两个输入

4 个答案: