如何在多选列表框上方显示标签？

Question

我有两个多重选择框，其中有一些 JavaScript 可以在框之间移动项目。我想向每个列表框上方显示的框添加一个标签，但无法让 CSS 工作。 下面是添加了框但未将标签添加到元素的 UI 外观：

下面是添加标签后图像的样子：

我当前用于生成添加了标签的图像的代码如下：

.addprop-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.addprop-container label {
  display: flex;
  flex-direction: column;
}

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

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.buttons button {
  margin-bottom: 10px;
  background-color: black;
  color: white;
  border-radius: 50px;
  font-size: larger;
  font-weight: bold;
}

<div class="addprop-container">
  <label for="listbox1">Available Properties:</Label>
  <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>

  <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>
  <label for="listbox2">Assigned to User:</Label>
  <select name="assigned-properties[]" id="listbox2" class="listbox" multiple>
  </select>
</div>

Answer 1

您还需要一个包装纸，然后堆叠标签并在该容器中进行选择

.addprop-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-group {
  display: flex;
  flex-direction: column;  /* Stack label and select vertically */
  align-items: flex-start; /* Align items to the start */
  margin-right: 20px;
}

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

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.buttons button {
  margin-bottom: 10px;
  background-color: black;
  color: white;
  border-radius: 50px;
  font-size: larger;
  font-weight: bold;
}

<div class="addprop-container">
  <div class="select-group">
    <label for="listbox1">Available Properties:</label>
    <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>
  </div>

  <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)"> &lt; </button>
    <button type="button" class="prop-selection" onclick="moveAllOptions(listbox2,listbox1)"> &lt;&lt; </button>
  </div>

  <div class="select-group">
    <label for="listbox2">Assigned to User:</label>
    <select name="assigned-properties[]" id="listbox2" class="listbox" multiple>
    </select>
  </div>
</div>