Question

我在尝试在输入字段左侧找到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>

这是它的样子：

Answer 1

请记住，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>

如何在右侧的同一行上对齐Label和Input？

1 个答案: