Question

我目前有两个有效的订单按钮，但可以像这样对齐：

我需要它们看起来像这样：

http://i.imgur.com/yy5wCQI.png

这些在我的网站上使用。

我可以通过在bitpay之前删除“/ form”来让它们像这样对齐，但它使得bitpay按钮将你带到paypal按钮链接。如果我添加“/ form”并打破水平对齐，我只能将它带到正确的订单页面。请帮忙。

      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXX">
<table>
<tr><td><input type="hidden" name="on0" value="200GB/2GB RAM">200GB/2GB RAM</td
</tr><tr><td><select name="os0">
<option value="1 MONTH">1 MONTH $25.00 USD</option>
<option value="3 MONTHS">3 MONTHS $65.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="http://i.imgur.com/ORLogUb.png" border="0" name="submit"
alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="http://i.imgur.com/ORLogUb.png" width="1" height="1">
</form>
<form action="https://bitpay.com/checkout" method="post" >
<input type="hidden" name="action" value="cartAdd" />
<input type="hidden" name="data" value="XXXXXXXXXXXXXXXXXX" />
<input type="image" src="http://i.imgur.com/pSatyZL.png" border="1" name="submit"
alt="BitPay, pay with bitcoins." >

Answer 1

查看http://jsfiddle.net/fuSYL/

上的实时示例

你需要为这两种形式提供额外的div包装器，还需要一些css。

HTML

<div class="form-container"> 

<!-- from paypal -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXX">
    <p>
        <input type="hidden" name="on0" value="200GB/2GB RAM">200GB/2GB RAM
    </p>
    <p>    
        <select name="os0">
            <option value="1 MONTH">1 MONTH $25.00 USD</option>
            <option value="3 MONTHS">3 MONTHS $65.00 USD</option>
        </select>
    </p>

    <input type="hidden" name="currency_code" value="USD">
    <input type="image" src="http://i.imgur.com/ORLogUb.png" border="0" name="submit"
alt="PayPal - The safer, easier way to pay online!" class="button-paypal">
    <img alt="" border="0" src="http://i.imgur.com/ORLogUb.png" width="1" height="1">
</form>
<!-- /from paypal -->

<!-- form bitpay -->    
<form action="https://bitpay.com/checkout" method="post">
    <input type="hidden" name="action" value="cartAdd" />
    <input type="hidden" name="data" value="XXXXXXXXXXXXXXXXXX" />
    <input type="image" src="http://i.imgur.com/pSatyZL.png" name="submit"
alt="BitPay, pay with bitcoins." class="button-bitpay">
</form>
<!-- /form bitpay -->

</div>

CSS

.form-container {   
    text-align: center;
    position: relative;
    padding: 0 0 10px;
}

.form-container p {
    margin: 0 0 10px;
    padding: 0;
}

.button-paypal {
    position: absolute;
    bottom: 0;
    margin: 0 0 0 -90px;
}

.button-bitpay {
    position: absolute;
    bottom: 0;
    margin: 0 0 0 10px;
}

对齐2个支付按钮居中和水平

1 个答案: