文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在右侧单行对齐两个文本框和一个搜索按钮

问在右侧单行对齐两个文本框和一个搜索按钮
EN

Stack Overflow用户
提问于 2018-04-17 20:15:15
回答 1查看 52关注 0票数 0

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

代码语言：javascript
复制
  <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

html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

发布于 2018-04-17 20:21:55

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

下面给出了示例html和css

​

代码语言：javascript
复制
.input-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49877871

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档