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

Question

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

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

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 或 displat:inline-block 在行跨度中显示... 折扣标签：浮动：left/right 价格标签：浮动

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

Place one div with price above another one

html

css

wordpress

woocommerce