html - 如何将这些元素显示在一行中？

Question

我有这个网站:

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

我放了一张图片以更好地理解我想要什么。我想将这些景点整体定位以与“库存”保持一致。

这是 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 Dev Toolbar”或 Firefox 的 Firebug，这样会有所帮助。

首先，Wishlist 按钮的 div block 完全位于 FORM 元素之外。所以你不能让它内联，除非你把它移到 FORM 元素里面。见第一张图片。

现在我已经将您的愿望 list 按钮的 DIV block 移动到 FORM 元素内，并为许多类和 DIV 修改了 CSS，绝对是 INLINE，以供演示。您需要真正努力将其尽可能模块化。我相信你会明白的。在下一张图片中，您将看到您想要的效果，并看到添加或编辑的 CSS 代码的 CIRCLED 部分