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;，但要记住它的宽度只会是form { display: inline-block; }与其内容一样宽，就像inline-formatting context中的元素一样。

{{1}}

jsFiddle

在div内的同一行中对齐2个项目

1 个答案: