将 div 并排对齐,没有空的黑色空间 [英] Align divs side by side with no empty black spaces
问题描述
我有以下 HTML.我正在使用 Twitter Bootstrap 和 AngularJS.
<select class="form-control"style="display:inline;浮动:右"ng-model="requestdata.units.length";ng-options="value.id as value.label group by value.group for value in lengthUnits";ng-change="validateLength()"><选项值="选择隐藏/></选择><div class="item item-input item-stacked-label item-custom-second"><span class="positive";ng-bind-html=translatedData.lengthField"></span><div class="number number";><输入类=表单控件"类型=数字"名称=长度"占位符=值"ng-model="requestdata.beltSystem.length";ng-required="true"ng-blur="validateLength()">
由于该 HTML 是被许多不同页面使用的部分的一部分,因此我无法重新排列它们.
我有以下 css.
.item-custom-first select{宽度:继承!重要;}.item-custom-second div{显示:inline-flex !important;宽度:自动!重要;}
有了这个,我可以将这些元素显示为
但是,我需要将输入字段并排对齐,输入字段和单位下拉列表之间的间距相等,如下所示.
无论如何,我可以用 CSS 做到这一点吗?如果需要,我将提供更多信息.提前致谢.
更新...如果可能,我希望该文本输入填充所有空白区域.
将 font-size: 0px;
添加到父级.
#example {宽度:自动;背景:红色;}#示例:第一个孩子{字体大小:0px;/* 添加到连接"div(如第一个示例中所示)!*/}#example div {显示:内联块;背景:黄色;字体大小:14px;}
<div>输入div</div><div>下拉div</div><div id="示例"><div>输入div</div><div>下拉div</div>
I have following HTML. I am using Twitter Bootstrap and AngularJS.
<div class="item item-custom-first">
<select class="form-control"style="display:inline; float:right" ng-model="requestdata.units.length" ng-options="value.id as value.label group by value.group for value in lengthUnits" ng-change="validateLength()">
<option value="" selected hidden />
</select>
</div>
<div class="item item-input item-stacked-label item-custom-second">
<span class="positive" ng-bind-html="translatedData.lengthField"></span>
<div class="number number" >
<input class="form-control" type="number" name="length" placeholder="Value"
ng-model="requestdata.beltSystem.length"
ng-required="true" ng-blur="validateLength()">
</div>
</div>
Since, that HTML is part of partial being used by lots of different pages, I cannot rearrange them.
I have following css.
.item-custom-first select{
width: inherit !important;
}
.item-custom-second div{
display: inline-flex !important;
width: auto !important;
}
With this I am able to display those elements as
However, I need input field to be aligned side by side with equal gap between input field and units drop-down as following.
Is there anyway, I can do that with CSS? I will be providing more info if needed. Thanks in advance.
UPDATE... I want that text input to fill in all empty space if possible.
Add font-size: 0px;
to the parent.
#example {
width: auto;
background: red;
}
#example:first-child {
font-size: 0px; /* Add to 'connect' divs (as seen in the first example)! */
}
#example div {
display: inline-block;
background: yellow;
font-size: 14px;
}
<div id="example">
<div>Input div</div>
<div>Drop down div</div>
</div>
<div id="example">
<div>Input div</div>
<div>Drop down div</div>
</div>
这篇关于将 div 并排对齐,没有空的黑色空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!