CSS issue- inline-block is not working

Question

I am trying to place two elements side by side. I used css inline block but surprisingly its not working.

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

Element 1 and element 2 is appearing in different line

Can you provide a jsfiddle or codepen with the code, including CSS? — lmgonzalves
– lmgonzalves, Commented May 25, 2015 at 21:58
you did inline block on their container, you have to put it on the divs themselves. — Marc B
– Marc B, Commented May 25, 2015 at 21:59

connexo · Accepted Answer · 2015-05-25 22:10:40Z

1

You need to apply display: inline-block; to each element that you want to be displayed in the same line, not to their parent container. I've added background-color so it's clearly visible where each <div> is exactly located. For both inline-blocks to be aligned vertically, use css property 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>

edited May 25, 2015 at 22:10

answered May 25, 2015 at 22:04

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS issue- inline-block is not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related