单选按钮和下拉菜单的对齐

Question

enter image description here我必须创建“查看”和“更新”单选按钮，每个按钮下方都有一个下拉菜单。为此，我编写了以下代码：

<div class="pageHead" align="center">
  Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<input type='radio' id='byState' ; style="margin-left:180px" ; value='View' name='byState'>View by Student's unique identity number
<input type='radio' id='byClub' ; style="margin-left:80px" ; value='Update' name='byClub'>Update by Student's identity number

<table>
  <tr>
    <td>
      <div style="width:200px;text-align: left; display: inline;">
        <select id="Select" ;>
          <option value="dropdown">Select</option>
          <option value="TN">Test1</option>
          <option value="IN">test2</option>
        </select>
      </div>
    </td>
  </tr>
</table>

但是，我无法将下拉菜单置于单选按钮下方；这是我得到的：

enter image description here

Answer 1

使用CSS：

---

.container {
  width: 100%;
}

.container,
.radio-buttons,
.radio-buttons>span,
.dropdowns {
}

.cell {
  display: inline-block;
  width: calc(50% - 2px);
}

<div class="pageHead" align="center">
  Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>

<div class="container">
  <div class="radio-buttons">
    <div class="cell">
      <input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
    </div>
    <div class="cell">
      <input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number </div>
  </div>
  <div class="dropdowns">
    <div class="cell">
      <select id="Select">
        <option value="dropdown">Select</option>
        <option value="TN">Test1</option>
        <option value="IN">test2</option>
      </select>
    </div>
    <div class="cell">
      <select id="Select">
        <option value="dropdown">Select</option>
        <option value="TN">Test1</option>
        <option value="IN">test2</option>
      </select>
    </div>
  </div>
</div>

使用表格

---

您可以使用表格将项目对齐，如下所示：

---

td {
  width: 50vw;
}

<div class="pageHead" align="center">Auto Loan Basis Point (Bps) Adjustments by State</div> <br><br>

<table>
  <tr>
    <td>
      <input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
    </td>
    <td>
      <input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <select id="Select">
          <option value="dropdown"> Select</option>
          <option value="TN">Test1</option>
          <option value="IN">test2</option>
        </select>
      </div>
    </td>
    <td>
      <div>
        <select id="Select">
          <option value="dropdown"> Select</option>
          <option value="TN">Test1</option>
          <option value="IN">test2</option>
        </select>
      </div>
    </td>
  </tr>

</table>