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

Question

在此处输入图片说明，我必须创建“查看”和“更新”单选按钮，并在每个按钮下方分别添加一个下拉菜单。 为此，我编写了以下代码：

 <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> 

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

在此处输入图片说明

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>