Ошибка CSS-inline-block не работает

Question

Я пытаюсь разместить два элемента бок о бок. Я использовал css встроенный блок, но на удивление его не работает.

<div class="item-body" style="display:inline-block"> 
    <!--- Element 1---> 
    <div style="width:150px;" class="input-group"> 
     <div class="spinner-buttons input-group-btn"> 
      <button ng-click="selectedItem.qnt=selectedItem.qnt===1?1:selectedItem.qnt-1;updateSelectedItemData();" class="btn spinner-down red" type="button"> 
       <i class="fa fa-minus"></i> 
      </button> 
     </div> 
     <input type="text" style="text-align: center;" ng-model="selectedItem.qnt" maxlength="3" class="spinner-input form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength"> 
     <div class="spinner-buttons input-group-btn"> 
      <button ng-click="selectedItem.qnt=selectedItem.qnt+1;updateSelectedItemData()" class="btn spinner-up green-haze" type="button"> 
       <i class="fa fa-plus"></i> 
      </button> 
     </div> 
    </div> 
    <!--- Element 2---> 
    <div > x {{i.item_qnt}}={{item_subtotal}}</div> 
</div> 

элемент 1 и элемент 2 появляется в отдельной строке

Answer 1

Вы должны применить display: inline-block; к каждому элементу, который вы хотите, которое будет отображаться в той же строке, не их родительского контейнера. Я добавил фоновый цвет, чтобы он был четко виден, где точно находится каждый <div>. Чтобы оба строковых блока были выровнены по вертикали, используйте свойство css vertical-align.

.item-body > div { 
 
    vertical-align: text-top; 
 
}

<div class="item-body"> 
 
    <!--- Element 1---> 
 
    <div style="display: inline-block; width:150px; background-color: #f8f8f8;"> 
 
     <div> 
 
      <button>-</button> 
 
     </div> 
 
     <input type="text" style="text-align: center;"> 
 
     <div> 
 
      <button>+</button> 
 
     </div> 
 
    </div> 
 
    <!--- Element 2---> 
 
    <div style="display:inline-block; background-color: #ddd;"> x {{i.item_qnt}}={{item_subtotal}}</div> 
 
</div>