0

我目前有 2 个可以工作的订单按钮，但排列得非常像这样：

http://imgur.com/ECRDQai

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

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." >
4

1 回答 1

0

请参阅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;
}
于 2013-11-04T14:50:24.483 回答