4

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

在此处输入图像描述

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

4

6 回答 6

7

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

.quantity {float: left;}

如果您的浮动元素开始从其父元素中退出，请不要忘记clear:both;之后（除非有一个高于所有元素的非浮动元素，否则它们会退出）。

于 2013-08-28T22:14:59.877 回答
1

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

float: left;

和按钮

display: inline;

http://jsfiddle.net/v7ryN/

于 2013-08-28T22:30:26.520 回答
0

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

于 2013-08-28T22:15:15.430 回答
0

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

于 2013-08-28T22:15:37.263 回答
0

将 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;
}

我已经检查过了。它会起作用的。

于 2013-08-28T22:26:00.967 回答
0

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

input-field-name {
   float:left;
}

add-cart-button-name {
   display: inline;
}
于 2019-10-30T03:50:51.203 回答