如何使用CSS將一個元素移動到另一個元素的右側？

Question

我想在我的網站上移動另一個元素旁邊的另一個元素。

基本上，我想車按鈕數量的權利。 float: right將按鈕水平放置在正確的位置。但我也想把它們相鄰移動。

Answer 1

.quantity是塊元素（它需要全行），所以你可以使用float這樣的：

.quantity {float: left;} 

不要忘記clear:both;，如果你的浮動元素開始下降了他們的父元素之後（除非有非浮動元素高於所有元素）。

Answer 2

嘗試使用position:relative;margin-right:10em，具體取決於您的寬度比例。希望這可以幫助

Answer 3

您可以在HTML中使用表格，然後在同一行內的不同列中添加購物車按鈕和數量。

Answer 4

更改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 5

您可以選擇元素數量的容器設置爲

float: left; 

和按鈕

display: inline; 

http://jsfiddle.net/v7ryN/