[英]Align 2 payment buttons centered and horizontally
我目前有2個可以正常使用的訂購按鈕,但排列非常像這樣:
我需要他們看起來像這樣:
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." >
請參閱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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.