使用 CSS 对齐价格位置（Woo Commerce Store）答案

【问题标题】：Alignment of price's location using CSS (Woo commerce Store)使用 CSS 对齐价格位置（Woo Commerce Store）
【发布时间】：2017-11-05 00:44:10
【问题描述】：

价格与名称（标题）对齐的问题

CSS 代码

.mgrt-product-title .price {
 padding-left: 749px;
 font-weight: bold;
 color:#000;
}

您可以在此处检查当前对齐方式 - my store。如何使价格一致？

【问题讨论】：

【解决方案1】：

您需要在此处更改内边距，因为您的内边距将根据您的价格位置的文本大小而变化。保持从右侧填充，它将被设置

.mgrt-product-title .price {
 float :right;
 padding-right: 100px;
 font-weight: bold;
 color:#000;
 }

【讨论】：

您好，感谢您的回答。我添加了您的填充，但仍然看起来不太好对齐。再检查一遍。我试图做这样的事情：i.imgur.com/qoMKPdT.png
做完这个之后不是所有的价格都在同一个地方吗？
看起来没有乱七八糟的。检查第一篇文章中的 URL，然后查看.. 看起来很糟糕。这是我目前拥有的代码：.mgrt-product-title .price { padding-left: 749px; padding-right: 100px; font-weight: bold; color:#000; } 但看起来很糟糕..

【解决方案2】：

我会删除左边的填充，使用 padding-right 代替（例如 100px 或任何你喜欢的）并添加 float: right; 以便价格都以相同的距离对齐到右侧。

.mgrt-product-title .price {
 float: right;
 padding-right: 100px;
 font-weight: bold;
 color:#000;
}

【讨论】：

您的代码运行良好。只有一个提示，如何移动按钮成为这样的图像？ i.imgur.com/qoMKPdT.png CSS 是这样的：a.add_to_cart_button
为此添加相同的内容为 - .button.add_to_cart_button 执行此操作 float: right; padding-right: 100px;然后在 .mgrt-product-desc 中，添加 -padding-bottom :20px
是的，但我认为该按钮需要向上移动，以便接近我之前提供的图像。你不这么认为吗？
这段代码对我有用：.mgrt-product .button.add_to_cart_button { margin-right:20px; margin-bottom: 110px; }