CSS - Горизонтальное линейное выравнивание

Question

Я разрабатываю веб-сайт (http://madworks.fr/suparis/fr/tuniques/14-syakati-tunic.html), и я хотел бы выровнять по горизонтали кнопку «цвет» «размер» «qtt» и «добавить в корзину» на одной строке. Я сделал все возможное, чтобы попробовать изменить свойства отображения на inline или table-cell, но это не сработало. То же самое для социальных сетей, которые должны быть выровнены со значком списка пожеланий. Может ли кто-нибудь помочь мне достичь этого?

Вот исходный код:

<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> 

Answer 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> 

и они будут иметь display: inline-block; на их, при необходимости отрегулируйте любые отступы/интервалы и т. д.

Но если это невозможно или слишком сложно, вы можете сделать это с помощью этого CSS:

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

У вас останутся некоторые дополнения и классы для настройки до тех пор, пока вы не получите их в одну строку. Я бы посоветовал учебник CSS и посмотрел на вещи, такие как заполнение, показ, поплавки и т. Д., Если у вас возникли проблемы.