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 。

希望这有帮助！

输入组插件的对齐方式

1 个答案: