html - 将两个文本框和一个搜索按钮右对齐并排成一行

Question

我正在研究一个元素的用户界面。我的任务是将左侧的搜索栏和 To: date、From: date 和右侧的搜索按钮对齐在同一标题栏上，如果不是则在下一行对齐。我试过这个 代码。 (答案是真实的，但由于所有答案都是真实的，但没有一个适用于我的代码，所以我编辑了我的问题并粘贴了编辑后的图像)

  <div  style="padding-left: 0; padding-bottom:10px">
  <div class="input-group"  >
  <div class="row">

    <div class="col-lg-6">
    <span class="input-group-addon" id="faIcon">
    <i class="fa fa-search"></i>
  </span>
  <input class="form-control" id="input1-group1 " type="text" 
  name="search" placeholder="Enter Search Text" 
  [(ngModel)]="filter">
  </div>

  <div class="col-lg-2">
    From:
    <input type="date" [(ngModel)]="fromDate" useValueAsDate> 
    </div>
    <div class="col-lg-2">
    To:
    <input type="date" [(ngModel)]="toDate" useValueAsDate>
    </div>
    <div>
    <div class="col-lg-2">
    <button type="button" 
 (click)="searchByDate(fromDate,toDate)">Search</button>
    </div>
    </div>

  </div>
 </div>
 <br>
 <div class="panel panel-default panel-transparent">
<div class="panel-heading text-left">
  <h2> Transaction </h2>
</div>
 </div>


  <table class="table table-striped table-responsive table-hover">
  <thead>
  <tr>
    <th>
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG ID
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG TYPE
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>LOG SUB-TYPE
      <span class="glyphicon sort-icon" *ngIf="key =='desc'"></span>
    </th>
    <th>MSG ID
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>
    <th>CORREL ID
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>UUID ID
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>MSG TYPE
      <span class="glyphicon sort-icon" *ngIf="key =='desc'"></span>
    </th>
    <th>INTERFACE NAME
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>


    <th>BROKER NAME
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>MSG FLOW NAME
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>SOURCE NAME
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>
    <th>TARGET NAME
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG POINT
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>LOG KEY TYPE-1
      <span class="glyphicon sort-icon" *ngIf="key =='desc'"></span>
    </th>
    <th>LOG KEY VALUE-1
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>


    <th>LOG KEY TYPE-2
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG KEY VALUE-2
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>LOG KEY TYPE 3
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>
    <th>LOG KEY VALUE 3
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG KEY TYPE-4
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>LOG KEY VALUE-4
      <span class="glyphicon sort-icon" *ngIf="key =='desc'"></span>
    </th>
    <th>ERROR TYPE
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>


    <th>ERROR COMPONENT
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>ERROR CD
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>REASON CODE
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>
    <th>LOG PAYLOAD ID
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>EXCEPTION PAYLOAD ID
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>MQMD PAYLOAD ID
      <span class="glyphicon sort-icon" *ngIf="key =='desc'"></span>
    </th>
    <th>MQRFH2 PAYLOAD ID
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>

    <th>ORIGIN TIMESTAMP
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG KEY TYPE-5
      <span class="glyphicon sort-icon" *ngIf="key =='desc'"></span>
    </th>
    <th>LOG KEY VALUE-5
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>
    <th>LOG KEY TYPE-6
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>
    <th>LOG KEY VALUE-6
      <span class="glyphicon sort-icon" *ngIf="key =='uName'"></span>
    </th>
    <th>BTID
      <span class="glyphicon sort-icon" *ngIf="key =='amt'"></span>
    </th>
    <th>RESULT
      <span class="glyphicon sort-icon" *ngIf="key =='date'"></span>
    </th>


  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let dat of result | paginate: { itemsPerPage: 5, 
   currentPage: p } | filter:filter;let i = index">
    <td>
      <button routerLinkActive="active" 
    (click)="forPayload(dat.LOG_KEY_VALUE_3)" [routerLink]="['/master- 
    system/transaction-payload']"
        class="btn btn-success" style="float:right">Payload</button>
    </td>

    <td>{{dat.LOG_ID}}</td>

    <td>{{dat.LOG_TYPE}}</td>
    <td>{{dat.LOG_SUB_TYPE}}</td>
    <td>{{dat.MSG_ID}}</td>
    <td>{{dat.CORREL_ID}}</td>
    <td>{{dat.UUID_ID}}</td>

    <td>{{dat.MSG_TYPE}}</td>

    <td>{{dat.INTERFACE_NAME }}</td>
    <td>{{dat.BROKER_NAME}}</td>
    <td>{{dat.MSG_FLOW_NAME}}</td>
    <td>{{dat.SOURCE_NAME}}</td>

    <td>{{dat.TARGET_NAME }}</td>

    <td>{{dat.LOG_POINT}}</td>
    <td>{{dat.LOG_KEY_TYPE_1}}</td>
    <td>{{dat.LOG_KEY_VALUE_1}}</td>
    <td>{{dat.LOG_KEY_TYPE_2}}</td>
    <td>{{dat.LOG_KEY_VALUE_2}}</td>

    <td>{{dat.LOG_KEY_TYPE_3}}</td>

    <td>{{dat.LOG_KEY_VALUE_3}}</td>
    <td>{{dat.LOG_KEY_TYPE_4}}</td>
    <td>{{dat.LOG_KEY_VALUE_4}}</td>
    <td>{{dat.ERROR_TYPE}}</td>
    <td>{{dat.ERROR_COMPONENT}}</td>


    <td>{{dat.ERROR_CD}}</td>

    <td>{{dat.REASON_CODE}}</td>
    <td>{{dat.LOG_PAYLOAD_ID}}</td>
    <td>{{dat.EXCEPTION_PAYLOAD_ID}}</td>
    <td>{{dat.MQMD_PAYLOAD_ID}}</td>

    <td>{{dat.MQRFH2_PAYLOAD_ID}}</td>

    <td>{{dat.ORIGIN_TIMESTAMP }}</td>
    <td>{{dat.LOG_KEY_TYPE_5 }}</td>
    <td>{{dat.LOG_KEY_VALUE_5 }}</td>
    <td>{{dat.LOG_KEY_TYPE_6 }}</td>

    <td>{{dat.LOG_KEY_VALUE_6 }}</td>

    <td>{{dat.BTID}}</td>
    <td>{{dat.RESULT}}</td>

  </tr>
</tbody>
 </table>
  <div class="text-center">
  <pagination-controls class="my-pagination" (pageChange)="p= $event"> 
   </pagination-controls>
 </div>
 </div>

盒子看起来像这样 -

enter image description here

Answer 1

您可以使用 flex-box 将它们排成一行并将内容最左和最右对齐

示例 html 和 css 如下所示

.input-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
}

<div class="input-group">
  <div>
    <span class="input-group-addon" id="faIcon">
      <i class="fa fa-search"></i>
    </span>
    <input class="form-control" id="input1-group1 " type="text" 
    name="search" placeholder="Enter Search Text" 
    [(ngModel)]="filter">
  </div>
  <div class="row">
    <div  class="col-md-7">
    From: <input type="date"  [(ngModel)]="fromDate" useValueAsDate >
    To: <input type="date"  [(ngModel)]="toDate" useValueAsDate>
    <button type="button" 
     (click)="searchByDate(fromDate,toDate)">Search</button>

     </div>
   </div>
</div>