html - 输入组插件的对齐

Question

我想将输入组插件 (DisplayPaid) 向左移动，以便它与固定宽度输入的右侧对齐。目前它拉到屏幕的右侧。

  <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
        <select id="ddlCategory" asp-for="SelectedCompanyID" asp-items="Model.Companies" class="form-control"></select>
        <span class="input-group-addon"><input id="chkDisplayPaid" type="checkbox" asp-for="DisplayPaid"/> Display Paid</span>
    </div>

http://jsfiddle.net/6h0L9t97/

Answer 1

可以使用CSS Flexbox来实现，再添加如下CSS:

.input-group {
  display: flex;
}

.input-group-addon {
  flex-basis: 40px;
  display: flex;
  align-items: center; /* Aligning items vertically center */
  justify-content: center; /* Aligning items horizontally center */
}

/* You can use a new class name as well */
.input-group-addon:last-child {
  flex-basis: 120px;
  display: flex;
  align-items: center; /* Aligning items vertically center */
  justify-content: center; /* Aligning items horizontally center */
}

查看更新后的 Fiddle .

希望这对您有所帮助!