css - 如何在 woocommerce 中设置价格标签宽度固定列产品列表的样式

Question

几个小时以来，我一直在尝试设计它的样式，但没有成功。

我在 woocommerce 的产品列表中设置了固定的列高度，我想在其底部设置价格(促销和常规)的样式，一个在左边，另一个在右边。

我使用了以下代码:

a .price {
 position:absolute;
 bottom:0;
 width:100%; }
ins.amount {
 position:relative;
 float:right;
 clear:both; }
del.amount {
 position:relative;
 clear:both; }

但它们的样式是一个挨着一个，而不是像我希望的那样位于 Angular 落。 我也尝试过设置利润率，但效果不佳，因为并非每个价格都具有相同数量的字符。 网址:http://men.trikaliotis.info 任何帮助将不胜感激

Answer 1

在您需要应用的 CSS 下方。我还创建了一个 fiddle .

.woocommerce ul.products li.product .price {
  display: inline-block;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.woocommerce ul.products li.product .price del {
  display:inline-block;
  float: left;
}

.woocommerce ul.products li.product .price ins {
  display:inline-block;
  float: right;
}