放置一个价格高于另一个的div

Question

我在默认的Wordpress主题“Unite”上有一个由wooCommerce插件驱动的小型电子商店。

我想修改现在看起来像这样的默认价格布局：

Css片段：

<span class="price">
    <del>
        <span class="amount">2,200.00&nbsp;руб.</span>
    </del> 
    <ins>
        <span class="amount">1,500.00&nbsp;руб.</span>
    </ins>
</span>

我需要将两个价格放在一行，它不会打破网格。 现在，它以这种方式呈现手表列表：

我如何修改css规则，使用css和伪元素将所有价格放在一行？谢谢！

Answer 1

这应该这样做，但你需要更改字体大小，使它们不超过产品容器的宽度...... / *为span.price添加了一个假想的宽度，不确定你的产品有多宽？ * /

span.price {
  width: 220px;
  display: block;
}
span.price del,
span.price ins {
  float: left;
}
span.price del {
  width: 35%;
  font-size: .7em;
}
span.price ins {
  width: 65%;
  font-size: 1.4em;
}

<span class="price">
    <del>
        <span class="amount">2,200.00&nbsp;руб.</span>
    </del> 
    <ins>
        <span class="amount">1,500.00&nbsp;руб.</span>
    </ins>
</span>

Answer 2

您可以使用Float或display：inline-block显示内联跨度... 折扣标签：浮动：左/右 价格标签：浮动