输入组插件的对齐

2017-10-21 52 views 0 likes

我想将输入组插件（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/

来源

2017-10-21 Reafidy

回答

您可以使用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。

希望这会有所帮助！

来源

2017-10-21 07:23:21

这似乎工作，但它确实有不必要的影响，将图标稍微向上移动并且不再垂直居中。有没有办法阻止它？ – Reafidy

@Reafidy更新了我的答案，请看看。现在应该排序。 –

@Reafidy这是我的荣幸！ –

输入组插件的对齐

回答

相关问题