html - 如何使用CSS将文本彼此相邻移动？

Question

这个问题已经有答案了:

Two divs side by side - Fluid display (10 个回答)

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties? (6 个回答)

已关闭 2 年前。

只是一个简单的CSS问题。尝试将价格移到“快速商店”文本旁边。基本上试图反射(reflect)这个设计:

  .quick_shop_container{
      width:100%;
    }
    
    .quick_shop{
      background-color:white;
      display:inline-block;
    }
    
    
    .quick_shop_text{
      float:left;
    }
    .product-item-price{
      float:left;
    }

<div class="quick_shop_container" data-price-wrapper="">
              <button class="quick_shop">
                <span class="quick_shop_text">Quick Shop</span>
                <div data-price-wrapper="">
                  <div class="product-item-price price" data-product-price="">| £51.95</div>
                </div>
              </button> 
  </div>

如何移动它？

Answer 1

虽然 Flexbox 总是更适合 1D 设计。您可以将您的 div 内联 block 设置为内联元素。

使用 > div 来定位它，因为您没有类。并添加 float : right 到它。

.quick_shop_container{
      width:40%;
    }
    
    .quick_shop{
      background-color:white;
      width: 100%;
    }
    .quick_shop > div{
    display:inline-block;
       float:right;
    }
    
    .quick_shop_text{
      float:left;
    }

<div class="quick_shop_container" data-price-wrapper="">
              <button class="quick_shop">
                <span class="quick_shop_text">Quick Shop</span>
                <div data-price-wrapper="">
                  <div class="product-item-price price" data-product-price="">| £51.95</div>
                </div>
              </button> 
  </div>