Html 输入组插件的对齐

我想将输入组加载项向左移动，以便它与固定宽度输入的右侧对齐。目前，它拉到屏幕的右侧

  <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>

您可以使用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 */
}

看一看更新的

---

希望这有帮助

这似乎是可行的，但它确实产生了不希望出现的效果，将图标向上移动得稍微高一些，不再垂直居中。“有什么办法可以阻止吗？”雷菲迪更新了我的答案，请看一看。现在应该分类了。