移动端Woodmart主题WooCommerce价格换行后文本无法对齐求助

针对你用del.amount { display: flex !important; flex-direction: column !important; }实现价格换行后，折扣价无法垂直对齐的问题，可通过调整价格容器的整体布局来修复：

@media (max-width: 767px) {
  /* 统一价格容器的垂直布局基准 */
  .woodmart-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 可根据需求改为center或flex-end调整对齐方向 */
  }
  /* 保持原价换行并优化行间距 */
  del.amount {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px; /* 控制原价两行的间距，可自行调整数值 */
  }
  /* 确保折扣价与原价容器对齐 */
  ins.amount {
    align-self: flex-start; /* 和上方原价容器的对齐方式保持一致 */
  }
}

说明： #

• 用@media (max-width: 767px)限定仅在移动端生效，可根据Woodmart主题的断点（比如768px）调整数值
• 若你的价格结构父类不是.woodmart-price-wrap，可通过浏览器开发者工具查看实际容器类名替换
• 若!important不是必需，可尝试移除，通过提升选择器优先级来确保样式生效

内容的提问来源于stack exchange，提问作者Enes Bajrami