html - Aligning 2 items in the same line within a div

Question

I have the following HTML and CSS. I am trying to have the IMG and then the BUTTON in the same line one next to the other. But they keep coming out one on top of the other.

<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>简单的块级元素内..您可以尝试更改表单的显示值，display: inline-block;尽管记住它的宽度只会与其内容一样宽，就像内联格式中的元素一样上下文。

form {
display: inline-block;
}

jsFiddle