入力グループのアラインメントの整列

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より多くを追加し、これを達成するために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を見てください。

希望すると便利です。