Html 网页标签相对于下拉菜单

Question

创建一个 HTML 网页，我想将多个下拉菜单全部放置在特定位置，同时在上方显示一个相对于各个下拉菜单位置的标签。
这是我最初的尝试，我认为我的问题可能是类的结构，但不确定。

.dropdown-container {
  position: relative;
  height: 300px;
  /* Gap between grid items */
}

.shift1 {
  position: absolute;
  top: 50px;
  right: 0px;
}

.utility1 {
  position: absolute;
  top: 50px;
  right: 0px;
}

.kiwi1 {
  position: absolute;
  top: 50px;
  right: 0px;
}

.label {
  position: relative;
}

<form id="create">
  <section>
    <nav>
      <div class="dropdown-container">

        <label for="shift1" class="label">Shift</label>
        <select class="shift1" id="shift1" name="shift1" onchange="dropDownShift()">
          <option disabled selected value="0"> -- Shift -- </option>
          <option value="1"> Shift 1 </option>
          <option value="2"> Shift 2 </option>
          <option value="3"> Shift 3 </option>
          <option value="4"> Shift 4 </option>
        </select>

        <label for="utility1" class="label">label 1</label>
        <select class="utility1" id="utility1" name="utility1" onchange="removeOption('utility',1 ,1)">
          <option disabled selected value="0"> -- U -- </option>
        </select>
        <label for="kiwi1" class="label">label 2</label>
        <select class="kiwi1" id="kiwi1" name="kiwi1" onchange="removeOption('kiwi', 1, 1)">
          <option disabled selected value="0"> -- KW(2) -- </option>
        </select>
      </div>
    </nav>
  </section>

  <footer>
    <input type="submit" value="CLEAR">
  </footer>
</form>

Answer 1

• 第 1 步：包装每个标签并在 div 元素中选择标签对。
• 第 2 步：将这些 div 元素定位为相对位置，并将每个标签元素定位为绝对位置。
• 第3步：保持选择元素静态。最后，调整顶部和左侧属性以获得所需的 UI。

样品：

div {
    position: relative;
    padding: 20px 0;
}

label {
    position: absolute;
    top: 0;
    left: 30px;
}

select {
    min-width: 200px;
    padding: .5rem 1rem;
}

<div>
    <label for="fruit">Select a fruit:</label>
    <select id="fruit">
        <option value="kiwi">Kiwi</option>
        <option selected value="cherry">Cherry</option>
    </select>
</div>