我试图并排放置两个元素。我使用了 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出现在不同的行
最佳答案
您需要申请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>
关于CSS 问题 - 内联 block 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30446515/