HTML页面下拉菜单定位及对应上方标签布局问题求助

你的代码核心问题有两个：

1. 所有下拉菜单的绝对定位参数完全一致，导致它们全部重叠在同一个位置
2. 标签与下拉菜单没有绑定布局关系，无法保证标签对应显示在下拉菜单上方

修复后的代码 #

CSS 部分

.dropdown-container {
  position: relative;
  height: 300px;
  /* 可根据需求调整容器高度 */
}

/* 给每个下拉+标签的组合单独设置位置 */
.shift-group {
  position: absolute;
  top: 20px;
  right: 300px;
}

.utility-group {
  position: absolute;
  top: 20px;
  right: 150px;
}

.kiwi-group {
  position: absolute;
  top: 20px;
  right: 0;
}

/* 确保标签在下拉菜单上方，且和下拉菜单对齐 */
.dropdown-label {
  display: block;
  margin-bottom: 5px;
  text-align: center;
}

HTML 部分

<form id="create">
  <section>
    <nav>
      <div class="dropdown-container">
        <!-- Shift 下拉组合 -->
        <div class="shift-group">
          <label for="shift1" class="dropdown-label">Shift</label>
          <select 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>
        </div>

        <!-- Utility 下拉组合 -->
        <div class="utility-group">
          <label for="utility1" class="dropdown-label">label 1</label>
          <select id="utility1" name="utility1" onchange="removeOption('utility',1 ,1)">
            <option disabled selected value="0"> -- U -- </option>
          </select>
        </div>

        <!-- Kiwi 下拉组合 -->
        <div class="kiwi-group">
          <label for="kiwi1" class="dropdown-label">label 2</label>
          <select id="kiwi1" name="kiwi1" onchange="removeOption('kiwi', 1, 1)">
            <option disabled selected value="0"> -- KW(2) -- </option>
          </select>
        </div>
      </div>
    </nav>
  </section>

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

关键修改点 #

• 把每个下拉菜单和对应的标签封装在一个.xxx-group容器中，让标签默认显示在下拉菜单上方，两者位置绑定
• 给每个分组设置不同的top/right值，让它们分布在容器的不同位置（可根据需求自行调整定位参数）
• 给标签添加display:block和margin-bottom，确保标签和下拉菜单之间有间距，对齐更美观

内容的提问来源于stack exchange，提问作者Kyle Kieser