Question

我使用Squarespace，所有元素都是响应式的，但代码块除外。因此，当我添加PayPal按钮时，会出现溢出...

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

我设法使用宽度：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>移动到与td相同的<option>，则应更正该问题。 table没有设置宽度或属性来保持其大小，因此单元格会被截断，因为它们不能全部适合宽度。

解决方案是设置表格宽度，以便您的选项可以换行到下一行。您还可以为选项设置padding，这为他们提供了喘息空间。

<table>

因此成为：

<table width="100%">

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

<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按钮溢出

1 个答案: