如何使用CSS将一个元素移动到另一个元素的右侧？

Question

我正在尝试在我的网站上将一个元素移到另一个元素旁边。

基本上，我希望购物车按钮位于数量的右侧。 float: right将按钮水平放置到正确的位置。但我也希望将它们彼此相邻移动。

Answer 1

.quantity是一个块元素（它占用整行），因此您可以像这样使用float：

.quantity {float: left;}

如果你的浮动元素开始从父元素中退出，那么不要忘记clear:both;（除非有一个非浮动元素高于所有元素，否则它们将会消失。）

Answer 2

您可以将数字选择元素的容器设置为

float: left;

和按钮

display: inline; 

http://jsfiddle.net/v7ryN/

Answer 3

根据您的宽度比例尝试使用position:relative;margin-right:10em。希望这有帮助

Answer 4

您可以在HTML中使用表格，然后在同一行中的不同列中添加购物车按钮和数量。

Answer 5

将HTML更改为：

<div class="quantity buttons_added"><input type="button" value="-" class="minus" style="float: left;
"><input type="number" step="1" min="1" name="quantity" value="1" title="Qty" class="input-text qty text" style="float: left;
"><input type="button" value="+" class="plus" style="float: left;
"><button type="submit" class="single_add_to_cart_button button alt" style="float: left;">Add to cart</button>
</div>

将CSS更改为：

.quantity {
width: auto;
margin-bottom: .5em;
}
.single_add_to_cart_button {
margin-top: 1%;
margin-left: 3%;
text-transform: uppercase;
width: 120px;
}

我已经检查了这个。它会起作用。

Answer 6

只需使用display:inline;更改按钮元素，并使用float:left;更改输入元素。您可以尝试使用此解决方案。

input-field-name {
   float:left;
}

add-cart-button-name {
   display: inline;
}