Question

我正在研究项目的UI。我的任务是对齐左侧的搜索栏和同一标题栏上的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

您可以使用if let digestData = sha256(url: fileURL) { let calculatedHash = digestData.map { String(format: "%02hhx", $0) }.joined() DDLogDebug(calculatedHash) }将它们排成一行并对齐最左侧和最右侧的内容

下面给出了示例flex-box和html

css

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

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

1 个答案: