如何确保小型显示器与货币保持一致？

Question

有人可以解决这个问题吗？

将货币放在显示的实际数字（价格）上方的一行。 它仅在窗口较小时（例如在手机上）显示。否则，它显示了应如何显示：€44,95 =>数字旁边的货币。

当前代码：

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">€</span>
  44,95
</span>

当屏幕宽度减小时，我可以添加什么代码来确保货币与数字保持在同一行？

Answer 1

这是因为跨度具有display: block，所以跨度就像占据整个行的块级元素一样。尝试使用其他值，例如display: inline-block或display: inline-flex

.woocommerce.single.single-product .entry-summary .price span {
  display: inline-flex;
}

移动视图中的屏幕截图。