html - div 内的 Paypal 按钮没有响应？

Question

所以我在我的网站上添加了一些 Paypal 按钮，我把它们放在一个 div 中，这样我就可以让它们彼此相邻显示。在桌面上一切正常，但在移动设备上，paypal 按钮没有缩小并且给我带来了问题？？

我使用的自定义 CSS 是

/* payment section */

.one {
  position: relative;
  width: 50%;
  float: left;
  border: 2px solid black;
}

.two {
  position: relative;
  width: 50%;
  float: left;
  border: 2px solid black;
}

<div class="container">
  <div class="one">

    <img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" />
    <ul>
      <li>Complete Listing on our site including</li>
      <li>Price</li>
      <li>Short description Line</li>
      <li>Description</li>
      <li>4 Images</li>
      <li>Social media promotions each month</li>
      <li>Direct link to your website</li>
      <li>Coupon codes if you want them</li>
    </ul>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="hosted_button_id" type="hidden" value="P4Y97FDDKGZPS" />
      <table>
        <tbody>
          <tr>
            <td style="text-align: center;"><input name="on0" type="hidden" value="Basic Subscription Length" />Basic Subscription Length</td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <select name="os0">
                <option value="Basic Monthly">Basic Monthly : $7.00 AUD - monthly</option>
                <option value="Basic 12 Month">Basic 12 Month : $70.00 AUD - yearly</option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;"><input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
          </tr>
          <tr>
            <td style="text-align: center;"><input maxlength="200" name="os1" type="text" /></td>
          </tr>
        </tbody>
      </table>
      <p style="text-align: center;"><input name="currency_code" type="hidden" value="AUD" />
        <input alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
        <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>

    </form>
  </div>
  <div class="two">

    <img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" />
    <ul>
      <li>Featured on the front page slider</li>
      <li>Top of the search and category pages</li>
      <li>Icon added to the image saying "popular"</li>
      <li>Your Companys social media links</li>
      <li>As many custom images as you like</li>
      <li>A custom description of your choice</li>
      <li>Social media promotions each week</li>
      <li>Email campaigns to our subscribers</li>
    </ul>
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="hosted_button_id" type="hidden" value="GGE7UFLSPM5S4" />
      <table>
        <tbody>
          <tr>
            <td style="text-align: center;"><input name="on0" type="hidden" value="Premium Subscription Length" />Premium Subscription Length</td>
          </tr>
          <tr>
            <td>
              <select name="os0">
                <option value="Premium Monthly">Premium Monthly : $15.00 AUD - monthly</option>
                <option value="Premium 12 Month">Premium 12 Month : $150.00 AUD - yearly</option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;"><input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
          </tr>
          <tr>
            <td style="text-align: center;"><input maxlength="200" name="os1" type="text" /></td>
          </tr>
        </tbody>
      </table>
      <p style="text-align: center;"><input name="currency_code" type="hidden" value="AUD" />
        <input alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
        <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>

    </form>
  </div>
</div>

<hr /> &nbsp;
<div class="container">
  <div class="one">
    <h3 style="text-align: center;"><img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" /> Basic Listing Page View</h3>

    <hr />

    <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view.png"><img class="aligncenter wp-image-1453" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view-252x300.png" alt="" width="390" height="464" /></a>

  </div>
  <div class="two">
    <h3 style="text-align: center;"><img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" /> Premium Listing Page View</h3>

    <hr />

    <h3 style="text-align: center;">
      <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view.png"><img class="aligncenter wp-image-1452" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view-187x300.png" alt="" width="390" height="626" /></a>
      Premium Listing Front Page View</h3>

    <hr />

    <h3 style="text-align: center;">
      <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box.png"><img class="aligncenter wp-image-730" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box-1024x456.png" alt="" width="390" height="174" /></a>
    </h3>
  </div>
</div>

有什么我可以尝试的想法吗？我很困惑为什么其他元素收缩得很好，但 paypal 却没有？？

谢谢大家

Answer 1

不完全是您希望您的元素在手机等小屏幕上的显示方式。您可以将 class="paypal" 添加到包含图像的输入字段，并将以下媒体查询添加到您的 CSS 以帮助针对较小的设备进行缩放

input.paypal {
    width: auto;
}

@media (max-width: 768px) {
    input.paypal {
        width: 100%;
    }
}

看这里的例子:

    /* payment section */

    .one {
        position: relative;
        width: 50%;
        float: left;
        border: 2px solid black;
    }

    .two {
        position: relative;
        width: 50%;
        float: left;
        border: 2px solid black;
    }

    input.paypal {
        width: auto;
    }

    @media (max-width: 768px) {
        input.paypal {
            width: 100%;
        }
    }

    select {
        box-sizing: border-box;
        width: 100%;
    }

    <div class="container">
        <div class="one">
            <img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" />
            <ul>
                <li>Complete Listing on our site including</li>
                <li>Price</li>
                <li>Short description Line</li>
                <li>Description</li>
                <li>4 Images</li>
                <li>Social media promotions each month</li>
                <li>Direct link to your website</li>
                <li>Coupon codes if you want them</li>
            </ul>
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input name="hosted_button_id" type="hidden" value="P4Y97FDDKGZPS" />
                <table>
                    <tbody>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on0" type="hidden" value="Basic Subscription Length" />Basic Subscription Length</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <select name="os0">
                                    <option value="Basic Monthly">Basic Monthly : $7.00 AUD - monthly</option>
                                    <option value="Basic 12 Month">Basic 12 Month : $70.00 AUD - yearly</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input maxlength="200" name="os1" type="text" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="text-align: center;">
                    <input name="currency_code" type="hidden" value="AUD" />
                    <input class="paypal " alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
                    <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>
            </form>
        </div>
        <div class="two">
            <img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" />
            <ul>
                <li>Featured on the front page slider</li>
                <li>Top of the search and category pages</li>
                <li>Icon added to the image saying "popular"</li>
                <li>Your Companys social media links</li>
                <li>As many custom images as you like</li>
                <li>A custom description of your choice</li>
                <li>Social media promotions each week</li>
                <li>Email campaigns to our subscribers</li>
            </ul>
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input name="hosted_button_id" type="hidden" value="GGE7UFLSPM5S4" />
                <table>
                    <tbody>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on0" type="hidden" value="Premium Subscription Length" />Premium Subscription Length</td>
                        </tr>
                        <tr>
                            <td>
                                <select name="os0">
                                    <option value="Premium Monthly">Premium Monthly : $15.00 AUD - monthly</option>
                                    <option value="Premium 12 Month">Premium 12 Month : $150.00 AUD - yearly</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input name="on1" type="hidden" value="Your Subscription Box Name" />Your Subscription Box Name</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">
                                <input maxlength="200" name="os1" type="text" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p style="text-align: center;">
                    <input name="currency_code" type="hidden" value="AUD" />
                    <input class="paypal" alt="PayPal – The safer, easier way to pay online!" name="submit" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/subscribe3.jpg" type="image" />
                    <img src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></p>
            </form>
        </div>
    </div>
    <hr /> &nbsp;
    <div class="container">
        <div class="one">
            <h3 style="text-align: center;"><img class="aligncenter wp-image-1392 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-package.png" alt="" width="400" height="100" />
Basic Listing Page View</h3>
            <hr />
            <a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view.png"><img class="aligncenter wp-image-1453" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/basic-page-view-252x300.png" alt="" width="390" height="464" /></a>
        </div>
        <div class="two">
            <h3 style="text-align: center;"><img class="aligncenter wp-image-1398 size-full" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-package.png" alt="" width="400" height="100" />
Premium Listing Page View</h3>
            <hr />
            <h3 style="text-align: center;"><a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view.png"><img class="aligncenter wp-image-1452" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/07/premium-page-view-187x300.png" alt="" width="390" height="626" /></a>
Premium Listing Front Page View</h3>
            <hr />
            <h3 style="text-align: center;"><a href="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box.png"><img class="aligncenter wp-image-730" src="https://www.subscriptionboxaustralia.com/wp-content/uploads/2018/05/Featured-Box-1024x456.png" alt="" width="390" height="174" /></a></h3>
        </div>
    </div>