將一個div內的同一行中的兩個項目對齊

Question

我有以下HTML和CSS。我正在嘗試將IMG和BUTTON放在同一行中。但他們不斷出現在另一個之上。

<div class="cartAddingButton"> 
    <img class="cartIcon" src="../BG/cartIcon1.png"> 
    <form name="cartAdding" action="../cart/cartAdding.php" method="post"> 
    <input type="button" value="<?php echo $lang['ADDTOCART']; ?>" class="addToCart" onclick="addtocart(<?php echo $itemId; ?>)" /> 
    </form> 
</div> 

CSS：

.cartAddingButton { 
text-align: right; 
vertical-align: middle; 
display: inline-block; 

} 
.cartIcon { 
float: right; } 
.addToCart { 
float: right; } 

Answer 1

這是因爲按鈕是<form>這簡直是一個block-level element內..你可以嘗試改變形式display: inline-block;的顯示值，但請記住，它的寬度將只與內容一樣寬，就像inline-formatting context中的元素一樣。

form { 
display: inline-block; 
} 

jsFiddle