文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我想在一行中对齐字形图标和输入文本框

问我想在一行中对齐字形图标和输入文本框
EN

Stack Overflow用户
提问于 2018-04-18 13:43:05
回答 1查看 203关注 0票数 1

我想在一行中对齐标题栏及其所有项目。这些项目包括搜索字形图标--搜索文本栏--起始日期输入框--截止日期输入框--搜索字形图标-->全部在一行上。我不能放入plunker，因为它是一个非常广泛的代码，它链接到所有地方，在angular4和node.js中完成。我已经显示了html代码。我无法在plunker中显示，因为它没有script.js文件。Angular有'.ts‘file.And，这就是UI。

​

代码语言：javascript
复制
#addbtn{
    float:right;
}

thead>tr>th:hover {
    cursor: pointer;
    background-color: #384c57;
    color: rgb(240, 202, 132);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.24);
}

th{
    width:1px;white-space:nowrap;
}


table{
    font-family: Arial, Helvetica, sans-serif;
    table-layout: fixed;
    display: block;
    overflow: scroll;
}


thead{
    background-color: #33444d;
    color: white;  
}




.card{
    border: none !important;
}


#faIcon{
    background: #2f4855;
    color: white;
    border: none;
}

input:hover {
    background-color: rgb(247, 185, 114)  
}

input:focus{
   border : 2px solid rgb(247, 185, 114) !important;
}
   


.panel {
    border: none;
    margin-bottom: 0
}

.panel-transparent {
    background: none;
}

.table{
color:rgb(255, 255, 255); background-color:rgba(17, 26, 24, 0.452);
}
.panel-transparent .panel-heading{
    background: rgba(44, 51, 59, 0.575)!important;
    text-align: center;
    color: #fff;
 
}
.my-pagination /deep/ .ngx-pagination .current {
    background: #33444d;
  }
  

//background:linear-gradient(to left,#5589a5cc,#2f4855c5);
代码语言：javascript
复制
<link rel="shortcut icon" href="./assets/favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-left: 0; padding-bottom:10px">

  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <span class="input-group-addon" id="faIcon">
          <i class="fa fa-search"></i>
        </span>
        <input class="form-control" style="margin-right: 480px" id="input1-group1 " type="text" name="search" placeholder="Enter Search Text"
          [(ngModel)]="filter">

      </div>
    </div>
 
    

    <div class="col-md-2">
      <div class="form-group">
        From:
        <input type="date" class="form-control" [(ngModel)]="fromDate" useValueAsDate>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        To:
        <input type="date" class="form-control" [(ngModel)]="toDate" useValueAsDate>
      </div>
    </div>

    <div class="col-md-2">
      <div class="form-group">
        <span>
          Search <button type="button" class="input-group-addon" class="fa fa-search" id="faIcon" (click)="searchByDate(fromDate,toDate)"></button>
        </span>
      </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>



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

​

css
angular
sass
javascript
html
EN

回答 1

Stack Overflow用户

发布于 2018-04-18 14:23:59

因此，看看您提供的内容，我看到了一些东西。

您需要将表单容器设置为form-inline类，还需要设置input-group-addon，但没有使用input组(如下所示)。我还注意到你有bootstrap 3.3.7，但是你没有加载bootstrap.min.js。请参阅有效的jsfiddle

试试下面的代码：

代码语言：javascript
复制
<div style="padding-left: 0; padding-bottom:10px">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline">
        <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon" id="faIcon">
              <i class="fa fa-search"></i>
            </span>
          <input class="form-control" style="margin-right: 380px" id="input1-group1 " type="text" name="search" placeholder="Enter Search Text" [(ngModel)]="filter">
          </div>
        </div>

        <div class="form-group">
          From:
          <input type="date" class="form-control" [(ngModel)]="fromDate" useValueAsDate>
        </div>

        <div class="form-group">
          To:
          <input type="date" class="form-control" [(ngModel)]="toDate" useValueAsDate>
        </div>

        <div class="form-group">
          <span>Search <button type="button" class="input-group-addon" class="fa fa-search" id="faIcon" (click)="searchByDate(fromDate,toDate)"></button>
            </span>
        </div>
      </form>
    </div>
  </div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49892006

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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