将两个文本框和一个搜索按钮在右侧对齐并在一行中答案

【问题标题】：To align two text boxes and one search button on the right and in a single line将两个文本框和一个搜索按钮在右侧对齐并在一行中
【发布时间】：2018-04-17 21:29:06
【问题描述】：

我正在处理一个项目的 UI。我的任务是对齐左侧的搜索栏和到：日期，从：日期和右侧相同标题栏上的搜索按钮，如果不是，则在下一行。我试过这个代码。（答案是真实的，但由于所有答案都是真实的，但没有一个对我的代码有效，所以我编辑了我的问题并粘贴了编辑后的图像）

  <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

【问题讨论】：

您所要求的只是将搜索栏向左对齐，其他项目的搜索栏图标，来往日期应该在右侧？
是的......对......
plnkr.co/edit/1JbUFmc2QfWLag2erO9v?p=info 看看这个
它不工作，请检查，我已经输入了我的问题的整个代码
你可以为此创建 plnkr 吗？

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

它不工作，请检查，我已经输入了我的问题的整个代码
是的。我使用了与您的问题相同的 html 代码。添加了一个额外的<div> 来包装span 和第一个input。检查并相应地更改您的HTML 代码
不，它不工作..有 css 和没有它也