CSS-水平内联对齐

我正在开发一个网站（），我想在一行上水平对齐“颜色”、“大小”、“qtt”和“添加到购物车”按钮。我尽力尝试将显示属性修改为内联或表格单元格，但没有成功。 对于那些应该与愿望列表图标保持一致的社交网络也是如此。 有人能帮我做到吗

以下是源代码：

<form id="buy_block" action="http://madworks.fr/suparis/fr/panier" method="post">
            <!-- hidden datas -->
            <p class="hidden">
                <input type="hidden" name="token" value="58dbb67dab473715d793e92ac45eb820">
                <input type="hidden" name="id_product" value="14" id="product_page_product_id">
                <input type="hidden" name="add" value="1">
                <input type="hidden" name="id_product_attribute" id="idCombination" value="68">
            </p>
            <div class="box-info-product">
                                                                                <div class="content_prices clearfix">
                                                <!-- prices -->
                        <div class="price_box clearfix">
                            <p class="our_price_display pull-left" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer"><span id="our_price_display" itemprop="price" content="500">500,00 €</span><meta itemprop="priceCurrency" content="EUR"></p>
                                                            <p id="old_price" class=" hidden pull-left" style="display: none;"><span id="old_price_display" style="display: none;"></span></p>
                                                        </div> <!-- end prices -->




                </div> <!-- end content_prices -->
                <div class="product_attributes clearfix">
                                                <!-- attributes -->
                        <div id="attributes">
                            <div class="clearfix"></div>
                                                                                                        <fieldset class="attribute_fieldset">
                                        <label class="attribute_label" for="group_1">Taille&nbsp;</label>
                                                                                    <div class="attribute_list">
                                                                                                <div class="selector" id="uniform-group_1" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">S</span><select name="group_1" id="group_1" class="form-control attribute_select no-print">
                                                                                                                <option value="1" selected="selected" title="S">S</option>
                                                                                                                <option value="2" title="M">M</option>
                                                                                                        </select></div>
                                                                                        </div> <!-- end attribute_list -->
                                    </fieldset>
                                                                                                                                            <fieldset class="attribute_fieldset">
                                        <label class="attribute_label" for="group_3">Couleur&nbsp;</label>
                                                                                    <div class="attribute_list">
                                                                                                <div class="selector" id="uniform-group_3" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">Noir</span><select name="group_3" id="group_3" class="form-control attribute_select no-print">
                                                                                                                <option value="8" title="Blanc">Blanc</option>
                                                                                                                <option value="11" selected="selected" title="Noir">Noir</option>
                                                                                                        </select></div>
                                                                                        </div> <!-- end attribute_list -->
                                    </fieldset>
                                                                                            </div> <!-- end attributes -->



                                            <!-- availability or doesntExist -->
                    <div id="availability_statut" style="display: none;">

                        <span id="availability_value" class=" st-label-warning">This product is no longer in stock</span>
                    </div>
                                            <div id="availability_date" style="display: none;">
                        <span id="availability_date_label">Availability date:</span>
                        <span id="availability_date_value"></span>
                    </div>
                    <!-- Out of stock hook -->
                    <div id="oosHook">

                    </div>


                </div> <!-- end product_attributes -->

                <div class="box-cart-bottom">
                    <!-- quantity wanted -->
                    <div class="qt_cart_box clearfix  ">
                                                    <p id="quantity_wanted_p">
                            <span class="quantity_input_wrap clearfix">
                                <a href="#" data-field-qty="qty" class="product_quantity_down">-</a>
                                <input type="text" min="1" name="qty" id="quantity_wanted" class="text" value="1">
                                <a href="#" data-field-qty="qty" class="product_quantity_up">+</a>
                            </span>
                        </p>

                        <div id="add_to_cart_wrap" class="">
                            <p id="add_to_cart" class="buttons_bottom_block no-print">
                                <button type="submit" name="Submit" class="btn btn-medium btn_primary exclusive">
                                    <span>Add to cart</span>
                                </button>
                            </p>
                        </div>  
                    </div>
                    <!-- minimal quantity wanted -->
                    <p id="minimal_quantity_wanted_p" style="display: none;">
                        The minimum purchase order quantity for the product is <b id="minimal_quantity_label">1</b>
                    </p>

                                        </div> <!-- end box-cart-bottom -->
            </div> <!-- end box-info-product -->
        </form>

500,00欧元”

泰尔
s
s
M
库勒
黑色的
布兰科
黑色的
这种产品已经没有存货了
上市日期：



添加到购物车


产品的最小采购订单数量为1

理想情况下，您可以对HTML进行重新排序，使这4个元素位于同一父元素下，如：

<div id="attributes">
  <fieldset class="attribute_fieldset"></fieldset>
  <fieldset class="attribute_fieldset"></fieldset>
  <p id="quantity_wanted_p"></p>
  <div id="add_to_cart_wrap"></div>
</div>

---

您将只剩下一些填充和类来进行调整，直到您将其调整到一行。如果您遇到问题，我会参考CSS教程并查找填充、显示、浮动等内容。

欢迎使用StackOverflow！您应该发布复制问题所需的最低代码，而不仅仅是发布到您网站的链接。如果链接断了，这个问题对将来的用户来说并不是毫无用处的。你能把CSS也贴出来吗？当涉及到样式时，仅仅提供HTML并没有多大帮助。

.product_attributes, .attribute_fieldset, .box-cart-bottom {
  display: inline-block;
}