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/で実際の例を参照してください。

これらの 2 つのフォームといくつかの css には、追加の div ラッパーが必要です。

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 に答える