CSS 问题 - 内联 block 不起作用

Question

我试图并排放置两个元素。我使用了 css 内联 block ，但令人惊讶的是它不起作用。

<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> 都清晰可见恰好位于。对于要垂直对齐的两个内联 block ，请使用 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>