[英]How do I align Label and Input on the same line to the right?
我在尝试找到输入字段左侧的2个按钮时苦苦挣扎。 我已经在互联网上尝试了几个建议,但我无法按照我想要的方式进行。
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
</div>
</div>
</div>
</div>
</div>
这是它的样子:
请记住,该label
是一个类似于span
的内联元素,因此您需要将其css设置为display: inline-block
表现得像div
一旦你完成了这个,让它们在同一行中的最简单方法是在父div上使用display:flex
和flex-wrap: nowrap
。
这是我最喜欢的flex-cheat-sheet
我已经简化了您的示例,您可以在下面的“运行代码段”中查看其工作原理。
.pull-right { display: flex; flex-wrap: nowrap; } .pull-right input{ border: 1px solid green;} .pull-right label{ border: 1px solid red; display: inline-block;}
<div class="pull-right"> <div class="search" style="height: 18px" ng-if="vm.showSearch()"> <form style="margin:0px" name="filter_actions" novalidate> <div> <input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search" style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields"> <a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"> <i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"> </i></a> </div> </form> </div> <div class="btn-group btn-group-xs" role="group" aria-label="..."> <label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.