我已经在我的网站上添加了一些贝宝按钮，我将它们放入了div，以便可以将它们彼此相邻显示。 一切都在dekstop上工作正常，但在移动设备上，贝宝按钮没有缩小，并引起了我的问题？
使用的自定义css im是
/* 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 />
<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>
有什么想法可以尝试吗？我很困惑，为什么其他要素收缩得很好，但是贝宝却没有？？
谢谢你们
答案 0 :(得分：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 />
<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>