Question

我的问题是这段代码：

        <form method="post" name="myform" class="donate-form">

                        <table class="donate-table">
                            <input type="hidden" name="cpp_header_image" value="logo.png"> 
                            <input type="hidden" name="on0" value="Donation Amount"> 
                            <tr>
                                <th>
                                    <div class="check">
                                        <input  name="os0" type="radio" value="5.00" id="radio"> 
                                        <label  for="$5" id="textBlock">$5.00</label>
                                    </div>
                                </th>
                                <th>
                                    <div class="checkboxgroup">
                                        <input  name="os0" type="radio" value="25.00" id="radio"> 
                                        <label  for="$25" id="textBlock">$25.00</label>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <div class="checkboxgroup">
                                        <input name="os0" type="radio" value="10.00" id="radio"> 
                                        <label  for="$10" id="textBlock">$10.00</label>
                                    </div>
                                </th>
                                <th>
                                    <div class="checkboxgroup">
                                        <input name="os0" type="radio" value="Other" id="radio"> 
                                        <label  for="other" id="textBlock">Custom</label>
                                    </div>
                                </th>
                            </tr>
                        </table>

问题在靠近底部的“捐赠表”中。我有4个单选按钮，5,10,25和其他，我希望这些单选按钮显示为2行2列。在chrome（全屏）上，一切看起来都很完美，没有水平滚动条，所有单选按钮看起来都不错，但是当我缩小窗口尽可能小或当我使用我的移动设备时，单选按钮被切断，在我的智能手机上水平滚动条出现（我知道问题是因为屏幕尺寸较小但我似乎无法修复它）当我删除3个单选按钮并且只有1时问题就消失了。我怎么能解决这个问题所以我可以显示4个单选按钮而没有出现水平滚动条？我看了，试过overflow-x：hidden;和一些其他建议的解决方案，但都没有。任何人都有修复？提前谢谢。

如果需要，这是我的CSS代码：

 .donations{
   margin-top: 15%;
   overflow: hidden;
  }

 .checkboxgroup {
   text-align: center;
   display: inline-block;
   min-width: 150px;
  }
 .checkboxgroup label {
   display: inline-block;
   font-size: 20px;
  }

Answer 1

浏览代码comments。希望这会对你有所帮助。

01. Replace all <th></th> with <td></td>

02. /* use .donate-table instead of .donations */

03. /* move min-height property to parent class (means .donate-table class) */

/* use .donate-table instead of .donations */
.donate-table{
   margin-top: 15%;
   overflow: hidden;
   width:100%;
   min-width:160px;
   max-width:500px;
  }

/* move min-height property to parent class (means .donate-table class) */
 .checkboxgroup {
   display: inline-block;
  }
 .checkboxgroup label {
   display: inline-block;
  }

<form method="post" name="myform" class="donate-form">

                        <table class="donate-table">
                            <input type="hidden" name="cpp_header_image" value="logo.png"> 
                            <input type="hidden" name="on0" value="Donation Amount"> 
                            <tr>
                                <td> <!-- Replace all <th></th> with <td></td> -->
                                    <div class="check">
                                        <input  name="os0" type="radio" value="5.00" id="radio"> 
                                        <label  for="$5" id="textBlock">$5.00</label>
                                    </div>
                                </td>
                                <td>
                                    <div class="checkboxgroup">
                                        <input  name="os0" type="radio" value="25.00" id="radio"> 
                                        <label  for="$25" id="textBlock">$25.00</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkboxgroup">
                                        <input name="os0" type="radio" value="10.00" id="radio"> 
                                        <label  for="$10" id="textBlock">$10.00</label>
                                    </div>
                                </td>
                                <td>
                                    <div class="checkboxgroup">
                                        <input name="os0" type="radio" value="Other" id="radio"> 
                                        <label  for="other" id="textBlock">Custom</label>
                                    </div>
                                </td>
                            </tr>
                        </table>

表格导致水平滚动条显示在移动设备

1 个答案: