Javascript 使用div将标题保持在适当的位置

我创建了一个过滤器搜索列表，该列表分为三类：

• 科莫尼卡多斯
• 在职培训
• 文件

该过滤器在查找嵌套在这些类别下的任何术语时都非常有效，但在执行此操作时，标题会出现令人讨厌的移动

例如，只要输入短语“Cuenta NT”，其他两个标题就会向下移动

var filter=document.getElementById（'myInput'）；
var=document.querySelectorAll（'.des'）；
filter.addEventListener（'keyup'，函数（e）{
var s=e.target.value.toLowerCase（）；
饮料。forEach（功能（el，i）{
如果（s.长度>3）{
if（el.textContent.toLowerCase（）.indexOf小于0）{
el.style.display='none'；
}否则{
el.style.display='block'；
}
}否则{
饮料。forEach（功能（el，i）{
el.style.display='block'；
});
}
});
});
.center{
保证金：自动；
边框：3px实心#73AD21；
宽度：80%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.集装箱{
保证金：自动；
边框：3px实心#73AD21；
宽度：80%；
显示器：flex；
}
#我的输入{
填充：10px；
宽度：60%；
边界半径：5px；
字体大小：14px；
边框：1px实心#CCC；
左边距：20px；
}
.名单{
浮动：左；
填充：0px；
右边距：20px；
列表样式：无；
页边顶部：-1px；
/*防止双重边界*/
左边距：20px；
字号：18px；
颜色：黑色；
背景色：#f6f6f6；
}
.列表李：第n个孩子（1）{
字体大小：粗体；
边缘底部：5px；
}
#清单1{
宽度：25%；
}
#h1{
背景：#e65c00；
/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#F9D423，#e65c00）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#F9D423，#e65c00）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
高度：50px；
字体大小：20px；
字体系列：SegoeUI；
文本对齐：居中；
边界半径：7px；
位置：初始；
}
#清单1A{
边框：1px实心#ddd；
边界半径：7px；
页边顶部：-1px；
/*防止双重边界*/
填充：8px；
文字装饰：无；
字号：18px；
颜色：黑色；
背景色：#f6f6f6；
显示：块；
}
#李娜：悬停{
背景色：#FCF3CF；
}
#清单2{
宽度：25%；
}
#氢{
背景：#00b09b；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向右，#96c93d，#00b09b）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#96c93d，#00b09b）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
高度：50px；
字体大小：20px；
字体系列：SegoeUI；
文本对齐：居中；
边界半径：7px；
}
#清单2 a{
边框：1px实心#ddd；
边界半径：7px；
页边顶部：-1px；
/*防止双重边界*/
填充：8px；
文字装饰：无；
字号：18px；
颜色：黑色；
背景色：#f6f6f6；
显示：块；
}
#李娜：悬停{
背景色：#b8ede2；
}
#清单3{
宽度：25%；
}
#h3{
背景：#36D1DC；
/*旧浏览器的回退*/
背景：-webkit线性梯度（向左，#5B86E5，#36D1DC）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向左，#5B86E5，#36D1DC）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
高度：50px；
字体大小：20px；
字体系列：SegoeUI；
文本对齐：居中；
边界半径：7px；
}
#清单3 a{
边框：1px实心#ddd；
边界半径：7px；
页边顶部：-1px；
/*防止双重边界*/
填充：8px；
文字装饰：无；
字号：18px；
颜色：黑色；
背景色：#f6f6f6；
显示：块；
}
#李娜：悬停{
背景色：#D6EAF8；
}
p、 无形的{
可见性：隐藏；
显示：内联；
字体大小：0.1px；
文本对齐：居中；
}








通信卫星


文件2
文件3


在职培训


文件2
文件3


文档


文件2
文件3

移除
对齐项目：居中.center
类中选择code>并将
边距顶部：20px//或任何您想要的值添加到
列表中

我看到您正在使用
和
，方法是添加

display: table-column;
margin-top: 20px;

到
.list
和
显示：表格至
.center


var filter=document.getElementById（'myInput'）；
var=document.querySelectorAll（'.des'）；
filter.addEventListener（'keyup'，函数（e）{
var s=e.target.value.toLowerCase（）；
饮料。forEach（功能（el，i）{
如果（s.长度>3）{
if（el.textContent.toLowerCase（）.indexOf小于0）{
el.style.display='none'；
}否则{
el.style.display='block'；
}
}否则{
饮料。forEach（功能（el，i）{
el.style.display='block'；
});
}
});
});
.center{
对齐项目：居中；
边界：3倍固体hsl（85,68,40%）；
显示：表格；
证明内容：中心；
页边距底部：自动；
左边距：自动；
右边距：自动；
宽度：80%；
}
.集装箱{
边界：3倍固体hsl（85,68,40%）；
显示器：flex；
保证金：自动；
宽度：80%；
}
#我的输入{
边界：1