如何在引导程序中对齐标签和选择？答案

【问题标题】：How to align label and select in bootstrap?如何在引导程序中对齐标签和选择？
【发布时间】：2019-09-01 21:59:50
【问题描述】：

我有以下结构：

HTML

<div class="form-group col-xs-3">
        <label class="col-xs-11">Specimen
            <select class="form-control">
                <option *ngFor="let option of specimenOptions" [value]="option.value">{{option.text}}</option>
            </select>
        </label>
        <i class="sprite sprite-Arrow-Right" aria-hidden="true"></i>
</div>

CSS

.form-group label {
   float: left;
   text-align: left;
   font-weight: normal;
}

.form-group select {
   margin-left: 10px;
   display: inline-block;
   vertical-align: middle;
}

有没有办法在不指定margin-top属性的情况下将图标与其余元素对齐？

【问题讨论】：

你是如何创建图标的？ <i class="sprite sprite-Arrow-Right" aria-hidden="true"></i>

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我找到了一种方法来做到这一点

display: inline-block;
vertical-align: middle;
float: none;

在每个元素上。我还将它们全部放在一个列中，并且必须使您的 select 独立于 label。你可以看到result here。希望对你有帮助。

【讨论】：