html - 将一个 div 的价格放在另一个 div 之上

Question

我在默认的 Wordpress 主题“Unite”上有一个由 wooCommerce 插件提供支持的小型 eStore。

我想修改一个默认的价格布局，现在看起来像这样:

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>

我需要将两个价格放在一行中，以免破坏网格。 现在，它以这种方式呈现 watch 列表:

我如何修改 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>