Question

一直试图将价格和“签证”按钮排成一段时间但没有成功，所以我想我应该向堆栈寻求帮助。

这就是现在的样子。

http://i.stack.imgur.com/M78kf.png不允许发布图片。

这是HTMl片段：

                      <div class="product_price" style="margin-top: 25px; border: solid black 1px;">
                       {if isset($product.product->show_price) && $product.product->show_price AND !$PS_CATALOG_MODE}
                            <span class="price" style="border: solid black 1px;">
                               {if !$priceDisplay}
                                   {convertPrice price=$product.price_tax_inc}
                               {else}
                                   {convertPrice price=$product.product->price}
                               {/if}
                           </span>

                           {if $product.reduction && isset($product.reduction)}
                               <span class="original_price">
                                   {convertPrice price=$product.price_without_reduction}
                               </span>
                           {/if}

                           {/if}

                            <a class="exclusive button ajax_add_to_cart_button btn_add_cart view-the-product" href="{$link->getProductLink($product.product)}" style="max-width: 35px; border: solid black 1px; display: inline;"><span>{l s='Visa'}</span></a>

                        </div>

我应该使用什么样的方式让“Visa”与价格对齐。

Answer 1

您必须将显示值设置为内联块，浮动，并添加相同的高度。然后可以通过填充值设置间距。

请尝试以下代码：

span.price, a.ajax_add_to_cart_button {
    display: inline-block;
    float: left;
    height: 40px;
}
span.price {
    padding: 10px;
    width: 100px;
}
a.ajax_add_to_cart_button {
    padding: 10px;
    width: 100px;
}

祝你好运！

Prestashop - 排列元素

1 个答案: