div並排對齊，沒有空白

Question

我有以下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做到這一點嗎？ 如果需要，我將提供更多信息。 提前致謝。

更新...我希望該文本輸入盡可能填充所有空白區域。

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/