Alignement d'un addon de groupe d'entrée

Question

Je voudrais déplacer l'addon de groupe d'entrée (DisplayPaid) vers la gauche pour l'aligner sur le côté droit d'une entrée de largeur fixe. Actuellement, il tire vers la droite de l'écran.

<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

Vous pouvez utiliser CSS Flexbox pour y parvenir, ajoutez le CSS plus suivant:

.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 */ 
} 

Jetez un oeil à la mise à jour Fiddle.

Espérons que cela aide!