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