Как отображать эти элементы в строке?

У меня есть этот сайт:Как отображать эти элементы в строке?

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

Я поставил картину, чтобы лучше понять, что я want.I хочу расположить эти достопримечательности неотъемлемых быть в соответствии с «на складе».

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

источник

2015-05-25 Cristi

Вы не пытались ничего до сих пор, так что увидеть 'float'. – panther

Я попытался добавить float: left, но не знал точно, где это сделать – Cristi

Укажите точную ширину для '.cart-number', затем используйте' float: left' для '.cart-number' и' .single_add_to_car_button' – Bassem

Это не просто легкая вещь, которую вы можете получить. Есть гораздо больше вещей, которые нужно изменить. Позвольте мне посмотреть, как далеко я могу объяснить. См. Прикрепленные изображения. Для этого вы должны использовать «Панель инструментов Chrome Dev» или Firebug Firefox, чтобы это помогло.

Во-первых, ДИВ блок вашей кнопки лист пожеланий полностью вне FORM элемента. Таким образом, вы не можете сделать его встроенным, если вы не переместите его внутри элемента FORM. См. 1-е изображение.

enter image description here

Теперь я переместил DIV блок кнопки сравнения внутри элемента FORM и модифицировал CSS для многих классов и DIVs, определенно, как INLINE, для демонстрации. Вы должны действительно работать, чтобы поставить это в модульном, насколько это возможно. Я уверен, что вы это выясните. В следующем изображении, вы увидите эффект, как вы хотели увидеть в кружке раздел для добавленного или измененного CSS кода

enter image description here

источник

2015-05-25 18:34:22

Для большей ясности моих комментариев и кода откройте прикрепленные изображения в новой вкладке/окне –

Добавить display:inline-block; в как.button и .cart-number. Он указывает элементам позиционировать себя в одной строке, и, надеюсь, с помощью этого метода вам не нужно будет использовать float.

источник

2015-05-25 16:30:04 Luke

Так и должно быть? .class {display: inline-block;} .cart-number {display: inline-block; float: left; width: 60px;} – Cristi

@Cristi whoops sorry Я намеревался набрать .button, not .class – Luke

Я исправил и до сих пор ничего не происходит. Попробуйте добавить код с firebug, и вы увидите, что ничего не меняется ... :( – Cristi

Как отображать эти элементы в строке?

ответ

Смежные вопросы