如何创建多行垂直单选按钮html答案

【问题标题】：How to create multiple vertical rows of radio buttons html如何创建多行垂直单选按钮html
【发布时间】：2021-01-14 15:38:20
【问题描述】：

我正在尝试在网页中复制此界面： Screenshot

到目前为止，我已经尝试过：

<form action="">
      <label for="viname1">Source Name 1</label> <input id="viname1" type="radio" name="output1" value="input1">  <input id="ainame1" type="radio" name="aoutput1" value="ainput1"><br>
      <label for="viname2">Source Name 2</label> <input id="viname2" type="radio" name="output1" value="input2">  <input id="ainame2" type="radio" name="aoutput1" value="ainput2"><br>
      <label for="viname3">Source Name 3</label> <input id="viname3" type="radio" name="output1" value="input3">  <input id="ainame3" type="radio" name="aoutput1" value="ainput3"><br>
      <label for="viname4">Source Name 4</label> <input id="viname4" type="radio" name="output1" value="input4">  <input id="ainame4" type="radio" name="aoutput1" value="ainput4"><br>
      <label for="viname5">Source Name 5</label> <input id="viname5" type="radio" name="output1" value="input5">  <input id="ainame5" type="radio" name="aoutput1" value="ainput5"><br>
      <label for="viname6">Source Name 6</label> <input id="viname6" type="radio" name="output1" value="input6">  <input id="ainame6" type="radio" name="aoutput1" value="ainput6"><br>
      <label for="viname7">Source Name 7</label> <input id="viname7" type="radio" name="output1" value="input7">  <input id="ainame7" type="radio" name="aoutput1" value="ainput7"><br>
      <label for="viname8">Source Name 8</label> <input id="viname8" type="radio" name="output1" value="input8">  <input id="ainame8" type="radio" name="aoutput1" value="ainput8"><br>
      <label for="viname9">None</label> <input id="viname9" type="radio" name="output1" value="input9">  <input id="ainame9" type="radio" name="aoutput1" value="ainput9"><br>

    </form>

但单选按钮不对齐，我不知道如何将它们与 CSS 或任何其他方式对齐。

提前致谢。

【问题讨论】：

标签： html css radio-button

【解决方案1】：

您可以使用包含行和列的表格。组成一列的单元格将垂直对齐。

<form action="">
  <table>
    <tr>
      <td><label for="viname1">Source Name 1</label></td>
      <td><input id="viname1" type="radio" name="output1" value="input1"></td>
      <td><input id="ainame1" type="radio" name="aoutput1" value="ainput1"></td>
    </tr>
    <tr>
      <td><label for="viname9">None</label></td>
      <td><input id="viname9" type="radio" name="output1" value="input9"></td>
      <td><input id="ainame9" type="radio" name="aoutput1" value="ainput9"></td>
    </tr>
  </table>
</form>

【讨论】：