想要将字形和输入文本框全部对齐在一行中 [英] Want to align the glyphicon and the input text boxes all in one line
本文介绍了想要将字形和输入文本框全部对齐在一行中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将标题栏及其所有项目对齐在一行上。这些项目包括搜索glyphicon - 搜索文本栏 - From Date输入框 - To date输入框 - 搜索glyphicon - > all在一行上。我不能放入运行程序，因为它是一个非常广泛的代码，它在angular4和node.js中完成了所有操作。我已经显示了html代码。我无法在plunker中显示，因为它没有script.js文件。 Angular有'.ts'文件。这就是UI。
＃
< link rel =快捷图标href =./ assets / favicon.ico> < link rel =stylesheethref =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-addonid =faIcon> < i class =fa fa-search>< / i> < /跨度> < input class =form-controlstyle =margin-right：480pxid =input1-group1type =textname =searchplaceholder =Enter Search Text[（ngModel）] =过滤器> < / DIV> < / DIV> < div class =col-md-2> < div class =form-group> From：< input type =dateclass =form-control[（ngModel）] =fromDateuseValueAsDate> < / DIV> < / DIV> < div class =col-md-2> < div class =form-group>要：< input type =dateclass =form-control[（ngModel）] =toDateuseValueAsDate> < / DIV> < / DIV> < div class =col-md-2> < div class =form-group> <跨度>搜索< button type =buttonclass =input-group-addonclass =fa fa-searchid =faIcon（click）=searchByDate（fromDate，toDate）>< / button> < /跨度> < / DIV> < / DIV> < / DIV> <峰; br> < div class =panel panel-default panel-transparent> < div class =panel-heading text-left> < H2>交易< / h2> < / DIV> < / DIV> < table class =table table-striped table-responsive table-hover> < THEAD> < TR> <的第i; < span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第>日志ID< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <> LOG TYPE< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < th> LOG子类型< span class =glyphicon sort-icon* ngIf =key =='desc'>< / span> < /第>第MSG ID< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < / span> CORREL ID< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <> UUID ID< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < / span>< th> MSG TYPE< span class =glyphicon sort-icon* ngIf =key =='desc'>< / span> < /第> < th> INTERFACE NAME< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < / span>< th> BROKER NAME< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <> MSG FLOW NAME< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < th> SOURCE NAME< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < th span>>目标名称< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <日志点>< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < /><> LOG KEY TYPE-1< span class =glyphicon sort-icon* ngIf =key =='desc'>< / span> < /第> < th> LOG KEY VALUE-1< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < / span><> LOG KEY TYPE-2< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <> LOG KEY VALUE-2< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < / span><> LOG KEY TYPE 3< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> <>< / span><> LOG KEY VALUE 3< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <> LOG KEY TYPE-4< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < th> LOG KEY VALUE-4< span class =glyphicon sort-icon* ngIf =key =='desc'>< / span> < /第> < / span>< th>错误类型< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < th>错误分量< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> < / span><> ERROR CD< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < th>原因代码< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> LOG PAYLOAD ID< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> < th span> EXCEPTION PAYLOAD ID< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < th span> MQMD PAYLOAD ID< span class =glyphicon sort-icon* ngIf =key =='desc'>< / span> < /第> MQRFH2 PAYLOAD ID< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < th> ORIGIN TIMESTAMP< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> < th> LOG KEY TYPE-5< span class =glyphicon sort-icon* ngIf =key =='desc'>< / span> < /第> < th> LOG KEY VALUE-5< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> <> LOG KEY TYPE-6< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> <> LOG KEY VALUE-6< span class =glyphicon sort-icon* ngIf =key =='uName'>< / span> < /第> < / span>< th> BTID< span class =glyphicon sort-icon* ngIf =key =='amt'>< / span> < /第> < th> RESULT< span class =glyphicon sort-icon* ngIf =key =='date'>< / span> < /第> < / TR> < / THEAD> < TBODY> < tr * ngFor =let dat result of | 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-successstyle =float ：右>有效载荷LT; /按钮> < / 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的> < /表> < div class =text-center> < pagination-controls class =my-pagination（pageChange）=p = $ event>< / pagination-controls> < / div>< / div>
解决方案
你需要设置表单容器的类为 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-addonid =faIcon>
< i class =fa fa-search>< / i>
< / span>
< input class =form-controlstyle =margin-right：380pxid =input1-group1type =textname =searchplaceholder =Enter Search Text[（ngModel ）] = 过滤器 >
< / div>
< / div>
< div class =form-group>
From：
< input type =dateclass =form-control[（ngModel）] =fromDateuseValueAsDate>
< / div>
< div class =form-group>
收件人：
< input type =dateclass =form-control[（ngModel）] =toDateuseValueAsDate>
< / div>
< div class =form-group>
< span>搜索< button type =buttonclass =input-group-addonclass =fa fa-searchid =faIcon（click）=searchByDate（fromDate，toDate） >< /按钮>
< / span>
< / div>
< / form>
< / div>
< / div>
I want to align the title bar and all its items on a single line. The items include the search glyphicon -- the search text bar -- the From Date input box -- the To date input box -- the search glyphicon --> all on a single line. I cannot put in plunker because it is a very extensive code and it linked all over ,done in angular4 and node.js. I have displaying the html code. I am unable to display in plunker because, it doesn't have a script.js file. Angular has '.ts' file.And this is the UI.
#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);
<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>
解决方案
So looking at what you have provided i see a few things.
You need to set the form container with a class of form-inline Also you have input-group-addon but you did not use input group (see Below). I have also noticed you have bootstrap 3.3.7 but you are not loading the bootstrap.min.js. Please see a working jsfiddle
Try the below code:
<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>
这篇关于想要将字形和输入文本框全部对齐在一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
