无法将UL定位在输入框下方，CSS布局问题求助

你的问题出在下拉列表（.combobox-options）的定位参数设置上，当前配置让它相对于整个容器左侧对齐，且垂直位置不符合预期。以下是具体修改方案：

修改后的完整代码 #

CSS部分 #

.combobox-wrapper {
  position: relative;
  width: 20em;
  min-height: 1.5em;
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: row;
}

.combobox-label {
  width: 50%;
  padding-top: 0.5em;
}

.combobox-input {
  font-size: 16px;
  font-weight: normal;
  height: 30px;
  padding: 4px 10px;
  width: 50%;
}

.combobox-options {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15em;
  overflow-y: auto;
  left: 50%; /* 对齐输入框左侧 */
  top: 100%; /* 从容器底部（即输入框底部）开始定位 */
  margin-top: 0.25em; /* 和输入框保持小间距 */
  width: 50%; /* 匹配输入框宽度 */
  z-index: 100;
  display: block;
  background: #fff;
  border: 1px solid #ddd;
}

.combobox-option {
  padding: 0.25em 0.5em;
  cursor: pointer;
  position: relative;
}

HTML部分 #

<div class="combobox-wrapper">
   <label for="combobox-input" class="combobox-label">
     Countries
   </label>
   <input id="combobox-input" class="combobox-input" />
   <ul id="combobox-listbox" role="listbox" class="combobox-options">
     <li tabindex="0" id=":rl:-BZ" role="option" value="BZ" class="combobox-option highlighted"><span>Belize</span></li>
     <li tabindex="0" id=":rl:-BJ" role="option" value="BJ" class="combobox-option"><span>Benin</span></li>
   </ul>
 </div>

修改说明 #

1. 水平对齐修正：将left: 0改为left: 50%，让下拉列表和输入框的左侧对齐（输入框占容器50%宽度，从容器中线位置开始）。
2. 垂直位置调整：把top: calc(100% + 0.25em)拆分为top: 100% + margin-top: 0.25em，确保列表从容器底部（即输入框底部）开始定位，同时保持合理间距。
3. 视觉一致性优化：添加width: 50%，让下拉列表宽度和输入框完全匹配；额外添加背景色和边框，增强视觉区分度。
4. 冗余代码清理：移除.combobox-wrapper中重复的display: flex声明。

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