如何在线显示这些元素？

Question

我有这个网站：

http://www.les-toiles.co/shop/amandine-dress/

我把照片更好地理解了我想要的东西。我想把这些景点定位为与“库存”保持一致。

http://i57.tinypic.com/29lfsr5.jpg

这是代码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>

如何使用CSS解决此问题？

我尝试添加此CSS代码，但遗憾的是无法正常工作

.cart-number {float:left;display:inline-block;}

Answer 1

这不仅仅是一件容易快速的事情。还有很多事情需要改变。让我看看我能解释多久。请参阅附图。为此，您应该使用“Chrome开发工具栏”＃39;或Firefox的Firebug，以便它有所帮助。

首先，愿望清单按钮的 div 块完全位于 FORM 元素之外。因此，除非您在 FORM 元素中移动它，否则无法使其内联。见第一张图片。

现在我已经将你的愿望清单按钮的DIV块移到了FORM元素中，并为许多类和DIV修改了CSS，绝对是INLINE，用于演示。您需要真正努力将其尽可能地模块化。我相信你会弄清楚这一点。在下一张图片中，您可以根据需要查看效果，并查看已添加或编辑的CSS代码的CIRCLED部分

Answer 2

将display:inline-block;添加到 .button和.cart-number。它告诉元素将自己定位在同一条线上，并希望通过这种方法，您不应该使用float。