javascript - div并排对齐，没有空白

我有以下HTML。我正在使用Twitter Bootstrap和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>

由于HTML是很多不同页面所使用的部分内容的一部分，因此我无法重新排列它们。

我有以下CSS。

.item-custom-first select{
    width: inherit !important;
}
.item-custom-second div{
    display: inline-flex !important;
   width: auto !important;
}

这样我就可以将那些元素显示为

但是，我需要输入字段并排对齐，并且输入字段和单位下拉列表之间的间隙相等，如下所示。


无论如何，我可以使用CSS做到这一点吗？如果需要，我将提供更多信息。提前致谢。

更新...
我希望该文本输入尽可能填充所有空白区域。

最佳答案

将font-size: 0px;添加到父级。

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

关于javascript - div并排对齐，没有空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33789873/