想要将glyphicon和输入文本框对齐在一行中

时间：2018-04-18 05:43:05

标签： javascript html css angular sass

我想将标题栏及其所有项目对齐在一行上。这些项目包括搜索glyphicon - 搜索文本栏 - From Date输入框 - To date输入框 - 搜索glyphicon - ＆gt;一切都在一条线上。我不能放入plunker因为它是一个非常广泛的代码并且它全部链接，在angular4和node.js中完成。我已经显示了html代码。我无法在plunker中显示，因为它没有script.js文件。 Angular有＆＃39; .ts＆＃39; file.And是UI。

＆＃13;
＆＃13; 
#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);
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

所以看看你提供的东西我看到了一些东西。

您需要使用form-inline类设置表单容器。您还有input-group-addon但未使用输入组（请参阅下文）。我也注意到你有bootstrap 3.3.7，但你没有加载bootstrap.min.js。请查看有效的jsfiddle

请尝试以下代码：

<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>
相关问题
最新问题