如何让标签显示在multiple select列表框上方？

你的CSS不生效的核心原因是标签<label>和对应的多选框<select>没有被放在同一个容器内：当前结构里，label和select是同级元素，你给label设置的flex-direction: column只会作用于label内部的元素，但label里只有文本，没有包含select，所以无法实现标签在select上方的布局。

修正方案 #

把每个<select>嵌套到对应的<label>标签中，这样label的flex列布局就能让标签文本和select垂直排列，标签自然显示在多选框上方。

修正后的完整代码 #

HTML

<div class="addprop-container">
  <!-- 将select嵌套到label内 -->
  <label for="listbox1" class="list-wrapper">
    Available Properties:
    <select name="all-properties" id="listbox1" class="listbox" multiple>
      <option value="1001">Test Line 1</option>
      <option value="1002">Test Line 2</option>
      <option value="1003">Test Line 3</option>
      <option value="1004">Test Line 4</option>
      <option value="1005">Test Line 5</option>
      <option value="1006">Test Line 6</option>
      <option value="1007">Test Line 7</option>
      <option value="1008">Test Line 8</option>
    </select>
  </label>

  <div class="buttons">
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox1,listbox2)"> >> </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox1,listbox2)"> > </button>
    <button type="button" class="prop-selection" onclick="moveSelectedOptions(listbox2,listbox1)"> < </button>
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox2,listbox1)"> << </button>
  </div>

  <!-- 同样嵌套第二个select -->
  <label for="listbox2" class="list-wrapper">
    Assigned to User:
    <select name="assigned-properties[]" id="listbox2" class="listbox" multiple>
    </select>
  </label>
</div>

CSS

.addprop-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 用gap替代margin，更灵活控制元素间距 */
}

/* 给包裹label和select的容器设置列布局 */
.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 标签和多选框之间的间距 */
}

.listbox {
  width: 250px;
  height: 300px;
  text-align: left;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 用gap替代button的margin-bottom */
}

.buttons button {
  background-color: black;
  color: white;
  border-radius: 50px;
  font-size: larger;
  font-weight: bold;
  padding: 8px 16px; /* 增加内边距，按钮更美观 */
  border: none;
  cursor: pointer;
}

JavaScript（补充移动逻辑）

// 移动选中项
function moveSelectedOptions(source, target) {
  Array.from(source.selectedOptions).forEach(option => {
    target.appendChild(option);
  });
}

// 移动所有项
function moveAllOptions(source, target) {
  Array.from(source.options).forEach(option => {
    target.appendChild(option);
  });
}

效果说明 #

修正后，每个多选框的标签会自动显示在其上方，布局整齐，符合你期望的效果。

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