我正在开发一个网站（http://madworks.fr/suparis/fr/tuniques/14-syakati-tunic.html），我希望水平对齐＆＃34;颜色＆＃34; ＆＃34;大小＆＃34; ＆＃34; QTT＆＃34;和＆＃34;加入购物车＆＃34;一条线上的按钮。我尽力尝试将显示属性修改为内联或表格单元格，但这并没有成功。 对于应与心愿单图标对齐的社交网络也是如此。 有人可以帮我实现吗？
这是源代码：
<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 </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 </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>
答案 0 :(得分：0)
理想情况下，您会重新排序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>
他们会对display: inline-block;进行调整，根据需要调整任何填充/间距等。
但如果这不可能或太难，你可以用这个CSS来做：
.product_attributes, .attribute_fieldset, .box-cart-bottom {
display: inline-block;
}
你只需要留下一些填充和类来调整，直到你得到它为止。如果你遇到麻烦，我会参考CSS教程并查看填充，显示，浮动等内容。