试图在我的桌子上显示一个单选按钮，但是即使有一些CSS，也没有运气

Posted 2021-04-29

我在表格中添加了一个单选按钮元素。但是，它没有出现在我的页面上。我使用了完全相同的代码，并创建了一个代码段，单选按钮确实出现了。另外，我添加了背景色，只是为了查看它的位置，结果单选按钮覆盖了我的文字。有谁知道为什么会这样以及如何解决？

编辑：这也是在Bootstrap 4下进行的。

这是我向单选按钮添加背景色时的外观。

<div class="row">
        <div class="col-25">
                <h1>ABC Corp</h1>
                <h4>Bill for the month of: June</h4>
                <h4>Payment due: 5/10/2020</h4>
                <hr />
                <table id="billing">
                 
                        <tr>
                            <th width="25%">Company</th>
                            <th width="25%">Plan</th>
                            <th width="25%">Packages</th>
                            <th width="25%">Price/pkg</th>
                            <th>Total</th>
                        </tr>
                        <tr>
                            <td>ACME</td>
                            <td>Premium</td>
                            <td>10,000</td>
                            <td>$0.039</td>
                            <td>
                                <div>
                                    <label><input type="radio" id='regular' name="optradio">390.00</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>NB Distribution</td>
                            <td>Professional</td>
                            <td>1,000</td>
                            <td>$0.049</td>
                            <td>
                                <div>
                                    <label><input type="radio" id='regular' name="optradio">49.00</label>
                                </div>
                            </td>
                        </tr>
              
                </table>
                <hr>
                <p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
               <hr >
        </div>
  </div>

答案

不要将您的输入内容包含在标签标签中，而应像下面那样将两者分开。

    <input type="radio" id='regular' name="optradio">
    <label for="regular">390.00</label>

另一答案

您可以在标签上使用display: flex：

label {
  display: flex;
}

<div class="row">
  <div class="col-25">
    <h1>ABC Corp</h1>
    <h4>Bill for the month of: June</h4>
    <h4>Payment due: 5/10/2020</h4>
    <hr />
    <table id="billing">

      <tr>
        <th width="25%">Company</th>
        <th width="25%">Plan</th>
        <th width="25%">Packages</th>
        <th width="25%">Price/pkg</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>ACME</td>
        <td>Premium</td>
        <td>10,000</td>
        <td>$0.039</td>
        <td>
          <div>
            <label><input type="radio" id='regular' name="optradio">390.00</label>
          </div>
        </td>
      </tr>
      <tr>
        <td>NB Distribution</td>
        <td>Professional</td>
        <td>1,000</td>
        <td>$0.049</td>
        <td>
          <div>
            <label><input type="radio" id='regular' name="optradio">49.00</label>
          </div>
        </td>
      </tr>

    </table>
    <hr>
    <p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
    <hr>
  </div>
</div>

另一答案

首先，单选按钮显示在浏览器@ csb00中，并且您还必须为两个单选按钮设置不同的ID。

以上是关于试图在我的桌子上显示一个单选按钮，但是即使有一些CSS，也没有运气的主要内容，如果未能解决你的问题，请参考以下文章

如何在wordpress中添加单选按钮到我的网站

我想在我的更新页面上显示选定的单选按钮

即使在成功消息之后，单选按钮的数据也没有保存在 Postgres DB 中

带有javascript的单选按钮

在单选按钮周围显示错误

单选按钮验证