Выравнивание переключателя и выпадающего меню

введите описание изображения здесь. Мне нужно создать переключатели «Просмотр» и «Обновить» с выпадающим меню ниже каждого. Для этого я написал следующий код:

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

Однако я не могу разместить раскрывающееся меню под переключателями; это то, что я получаю вместо этого:

введите описание изображения здесь

javascript,css,

0

Ответов: 1


0

Использование 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>

JavaScript, CSS,
Похожие вопросы