在前端页面开发中，搜索框、表单选择等场景经常需要实现下拉列表紧贴输入框底部对齐的效果，很多开发者在设置定位时容易出现下拉列表偏移、留有间隙或者位置错乱的问题，下面讲解具体的实现方法。
核心实现原理
要实现下拉列表<ul>紧贴输入框底部对齐，核心是利用CSS的相对定位+绝对定位组合：将输入框的父容器设置为相对定位，作为下拉列表绝对定位的参考容器，下拉列表设置为绝对定位，通过top和left属性控制其位置，让它的顶部刚好贴合输入框的底部。
基础HTML结构
首先搭建输入框和下拉列表的基础结构，下拉列表默认隐藏，触发交互时显示：
<div class="input-container">
<input type="text" class="search-input" placeholder="请输入内容" />
<ul class="dropdown-list">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</div>
关键CSS样式设置
接下来设置对应的CSS样式，重点处理定位相关的属性：
/* 输入框容器设置为相对定位，作为下拉列表的定位参考 */
.input-container {
position: relative;
width: 300px;
margin: 50px auto;
}
/* 输入框样式，设置合适的高度和内边距 */
.search-input {
width: 100%;
height: 40px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
outline: none;
}
/* 下拉列表样式，绝对定位紧贴输入框底部 */
.dropdown-list {
position: absolute;
top: 100%; /* 顶部距离参考容器顶部的距离为参考容器高度，即刚好在容器下方 */
left: 0;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ddd;
border-top: none; /* 去掉顶部边框，避免和输入框边框重叠产生双倍边框 */
border-radius: 0 0 4px 4px;
background-color: #fff;
box-sizing: border-box;
display: none; /* 默认隐藏 */
z-index: 10; /* 避免被其他元素遮挡 */
}
/* 下拉列表选项样式 */
.dropdown-list li {
padding: 10px 12px;
font-size: 14px;
cursor: pointer;
}
.dropdown-list li:hover {
background-color: #f5f5f5;
}
交互逻辑实现
添加简单的JavaScript逻辑控制下拉列表的显示和隐藏：
// 获取元素
const input = document.querySelector('.search-input');
const dropdown = document.querySelector('.dropdown-list');
// 输入框聚焦时显示下拉列表
input.addEventListener('focus', function() {
dropdown.style.display = 'block';
});
// 点击页面其他区域隐藏下拉列表
document.addEventListener('click', function(e) {
if (!input.contains(e.target) && !dropdown.contains(e.target)) {
dropdown.style.display = 'none';
}
});
// 选择下拉选项后将内容填入输入框并隐藏下拉列表
dropdown.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
input.value = e.target.textContent;
dropdown.style.display = 'none';
}
});
常见问题及解决方法
下拉列表出现间隙
如果出现下拉列表和输入框之间有间隙，首先检查输入框和下拉列表的margin属性，确保输入框没有底部外边距，下拉列表没有顶部外边距。其次检查是否设置了top: 100%，如果手动设置了具体的像素值，可能会因为输入框高度变化导致间隙。
下拉列表宽度和输入框不一致
确保输入框和下拉列表的宽度计算方式一致，都设置box-sizing: border-box，这样宽度会包含内边距和边框，避免因为内边距或边框宽度不同导致两者宽度不一致。
定位偏移问题
如果下拉列表向左或向右偏移，检查left属性是否设置为0，同时确保输入框容器没有设置padding-left或者padding-right，如果有内边距需要调整left的值，比如容器有12px左内边距，那么下拉列表的left需要设置为-12px。
适配不同场景
如果输入框有动态高度，比如输入框高度会根据内容变化，只需要保证top: 100%的设置，下拉列表就会自动跟随输入框的高度变化，始终紧贴底部。如果页面有滚动场景，需要确保定位容器的父元素没有设置overflow: hidden，避免下拉列表被裁剪。