贝宝按钮溢出

Question

我正在使用 Squarespace，所有元素都是响应式的，除了代码块。所以，当我添加 PayPal 按钮时，出现溢出...

像这样：http://static1.squarespace.com/static/537a5c42e4b0f3418c1f0939/t/54f398c0e4b02ef942b49034/1425250496634/Untitled-2.jpg

我设法使用 width:100% 属性纠正了按钮图像的这个问题，但它似乎不适用于这些选项。我也不想用 CSS 隐藏溢出；这个想法是让选项也适合代码块。谁能帮帮我？

我使用的代码是：

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4G3U9LF2TYKBS">
<table>
    <td>
    <input type="hidden" name="on0" value="Style">Style</td>
    <td>
    <select name="os0">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    </select>
    </td>
    <td>
    <input type="hidden" name="on1" value="Color">Color</td>
    <td>
    <select name="os1">
    <option value="White">White</option>
    <option value="Black">Black</option>
    </select>
    </td>
    <td>
    <input type="hidden" name="on2" value="Size">Size</td>
    <td>
    <select name="os2">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="2XL">2XL</option>
    </select>
    </td>   
    <td>
</table>
    <br>
    <div class="pp-cart">
    <input width="100%" type="image" src="http://static1.squarespace.com/static/537a5c42e4b0f3418c1f0939/t/54f33ec1e4b0e55cd09f57b9/1425227457194/Cart_+EN.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1">
    </div>
</form>

Answer 1

代码有一些问题，主要是处理 table 本身：

<td>
<input type="hidden" name="on0" value="Style">Style</td>
<td>
<select name="os0">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>

此处显示的

Style 可能会溢出，因为它是自己的 td。如果您将 <input> 移动到与 <option> 相同的 td 中，它应该可以更正该问题。 table 没有设置宽度，也没有保持其大小的属性，因此单元格会被截断，因为它们不能全部适合宽度。

解决方案是设置 table 宽度，以便您的选项可以换行到下一行。您还可以为选项设置padding，这会给他们一些喘息的空间。

<table>

于是变成：

<table width="100%">

并将<input>合并为与<options>相同的td：

<td style="float: left; padding: 0 20px 10px 0;">
  <input type="hidden" name="on0" value="Style">Style
  <select name="os0">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
</td>

完整代码：

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="4G3U9LF2TYKBS">
  <table width="100%">
    <td style="float: left; padding: 0 20px 10px 0;">
      <input type="hidden" name="on0" value="Style">Style
      <select name="os0">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </td>
    <td style="float: left; padding: 0 20px 10px 0;">
      <input type="hidden" name="on1" value="Color">Color
      <select name="os1">
        <option value="White">White</option>
        <option value="Black">Black</option>
      </select>
    </td>
    <td style="float: left; padding: 0 20px 10px 0;">
      <input type="hidden" name="on2" value="Size">Size
      <select name="os2">
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="2XL">2XL</option>
      </select>
    </td>
  </table>
  <div class="pp-cart">
  <input width="250" type="image" src="http://static1.squarespace.com/static/537a5c42e4b0f3418c1f0939/t/54f33ec1e4b0e55cd09f57b9/1425227457194/Cart_+EN.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
      <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1">
  </div>
</form>

贝宝按钮溢出

PayPal button overflow

paypal

overflow

options

button

responsive-design