Html 如何在一行中显示这些元素？

我有这个网站：

我放了一张图片，以便更好地理解我想要的东西。我想将这些景点定位为与“库存”一致的整体

这是HTML代码：

<div class="single_variation_wrap" style="">
    <div class="single_variation">
         <p class="stock in-stock">Only 2 left in stock</p>
    </div>
    <div class="variations_button add-cart">
        <div class="cart-number">
            <span></span>
            <div class="quantity">
                <input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
           </div>
       </div>
       <button type="submit" class="button single_add_to_cart_button alt btn-block">
           <i class="icon-cart2"></i>
           Add to cart              
       </button>
    </div>

    <input type="hidden" name="add-to-cart" value="1726">
    <input type="hidden" name="product_id" value="1726">
    <input type="hidden" name="variation_id" value="1922">
</div>

---

添加

显示：内联块到两个按钮
和
购物车编号
。它告诉元素将它们自己定位在同一行上，希望通过这种方法，您不需要使用
float
 这不仅仅是一件简单快捷的事情。还有很多事情需要改变。让我看看我能解释到什么程度。请参阅附件中的图片。为此，您应该使用“Chrome开发工具条”或Firefox的Firebug，这样会有所帮助

首先，您的愿望列表按钮的div块完全位于表单元素之外。因此，除非将其移动到表单元素中，否则无法将其内联。请参见第一幅图


现在，我已经将Wishlist按钮的DIV块移动到表单元素中，并修改了许多类和DIV的CSS，当然是内联的，以供演示。你需要非常努力地将其尽可能模块化。我相信你会明白的。在下一幅图中，您将看到想要的效果，并看到添加或编辑的CSS代码的圆圈部分

到目前为止，您没有尝试过任何操作，因此请参见
float
。我尝试添加float:left，但不知道确切的操作位置为
指定确切的宽度。购物车编号
然后使用
float:left
对
。购物车编号
和
都使用
float:left
。单个添加到车按钮
我添加此代码。购物车编号{宽度：60px；float:left；}.single_add_to_car_按钮{float:left；}但不起作用。另外，在查看了Chrome和Safari上提供的链接后，“add to cart”按钮似乎已经与“quantity”框水平对齐。应该是吗。类{display:inline block；}。购物车编号{display:inline block；float:left；width:60px；}@Cristi哇哦，对不起，我是想键入.button，不是.classI。已更正，但仍然没有任何结果。尝试使用firebug添加代码，您将看到没有任何更改…：（@Cristi我在Safari中跟踪了你的链接，按钮似乎是为我内联显示的？另外，请确保为两个类指定宽度。请完全按照你所写的方式输入代码。在你添加的文件中，woocommerce.css？感谢为使我的评论和代码更清晰，请在新的选项卡/窗口中打开附加的图像
.cart-number {float:left;display:inline-block;}