并排对齐div没有空的黑色空格

Question

我有以下HTML。我正在使用Twitter Bootstrap和AngularJS。

cat -n  tests/test_pipeline.py  | more
     1  import sys
     2  import os
     3  import filecmp
     4  import pandas as pd

因为HTML是许多不同页面部分使用的一部分，所以我无法重新排列它们。

我有以下css。

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

有了这个，我可以将这些元素显示为

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

无论如何，我能用CSS做到吗？如果需要，我会提供更多信息。提前谢谢。

... UPDATE 如果可能的话，我希望该文本输入填充所有空白区域。

Answer 1

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

Answer 2

您可以像pull-right一样添加<div class="item item-input item-stacked-label item-custom-second pull-right">，然后添加margin-right将它们全部分开。

请参阅小提琴：https://jsfiddle.net/smh6bsrq/1/