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>

CSS issue- inline-block无效

1 个答案: