如何创建按标签分组的单选按钮

Question

我在HTML中使用这种结构：

任何人都知道如何实现这一点，以便上面的标签与单选按钮相对应？我遇到的最大问题是每个单选按钮上方的水平标签。

只需要一个纯粹的HTML和CSS解决方案。

这是我的蹩脚尝试，我正在使用Semantic UI React：

<div class="row question-row">
                        <div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
                            Statement three</p></div>
                        <div class="five wide column">
                            <form class="ui form radio-question"><label class="horizontal-label">High</label><label
                                class="horizontal-label">Medium</label><label
                                class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="1"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="2"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="3"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="4"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="5"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="6"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="7"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="8"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="9"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="10"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="11"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="12"><label></label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

CSS ：

.ui {

  .sub-section-grid {

    .question-row {
      margin-bottom: 30px;
    }
    .radio-statements {
      top: 20px;
    }

    .horizontal-label {
      margin-right: 20px;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.57;
      letter-spacing: normal;
      text-align: left;
      color: #868686;
    }

    .help-text {
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.67;
      letter-spacing: normal;
      text-align: left;
      color: rgba(139, 142, 142, 0.7);
    }

    .info
    {
      &.circle {
        margin-bottom: 20px;
        margin-top: -40px;
      }
    }
  }
}

Answer 1

如何使用一些好的'html表？

td {
  width:20%;
}

<table>
  <thead>
    <tr>
      <td></td>
      <td>High</td>
      <td>Medium</td>
      <td>Low</td>
      <td>N/A</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Statement one</td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
    </tr>
        <tr>
      <td>Statement two</td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
    </tr>
        <tr>
      <td>Statement three</td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
      <td><input type="radio"/></td>
    </tr>
  </tbody>
</table>

Answer 2

仅使用css修复工作示例。

.inline{
  display : flex;
    
  }
  .question-row {
    display: flex;
  }
  .field{
  padding-top: 8px;
    padding-left: 14px;
 
  }
  .horizontal-label{
     padding-left: 4px;
  }

<div class="row question-row">
                        <div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
                            Statement three</p></div>
                        <div class="five wide column">
                            <form class="ui form radio-question"><label class="horizontal-label">High</label><label
                                class="horizontal-label">Medium</label><label
                                class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="1"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="2"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="3"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="4"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="5"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="6"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="7"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="8"><label></label></div>
                                    </div>
                                </div>
                                <div class="inline fields">
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="9"><label></label></div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="10"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="11"><label></label>
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="ui fitted radio checkbox"><input type="radio" class="hidden"
                                                                                     readonly="" tabindex="0"
                                                                                     value="12"><label></label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>