javascript - 使用 div 将标题固定在适当的位置

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

交流
在职培训
文档

过滤器在查找嵌套在这些类别下的任何术语时效果很好，但在执行此操作时标题会出现烦人的移动。

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

var filter = document.getElementById('myInput');
var drinks = document.querySelectorAll('.des');

filter.addEventListener('keyup', function(e) {
  var s = e.target.value.toLowerCase();
  drinks.forEach(function(el, i) {
    if (s.length > 3) {
      if (el.textContent.toLowerCase().indexOf(s) < 0) {
        el.style.display = 'none';
      } else {
        el.style.display = 'block';
      }
    } else {
      drinks.forEach(function(el, i) {
        el.style.display = 'block';
      });
    }

  });
});

.center {
  margin: auto;
  border: 3px solid #73AD21;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  margin: auto;
  border: 3px solid #73AD21;
  width: 80%;
  display: flex;
}

#myInput {
  padding: 10px;
  width: 60%;
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid #CCC;
  margin-left: 20px;
}

.list {
  float: left;
  padding: 0px;
  margin-right: 20px;
  list-style: none;
  margin-top: -1px;
  /* Prevent double borders */
  margin-left: 20px;
  font-size: 18px;
  color: black;
  background-color: #f6f6f6;
}

.list li:nth-child(1) {
  font-weight: bold;
  margin-bottom: 5px;
}

#list1 {
  width: 25%;
}

#h1 {
  background: #e65c00;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F9D423, #e65c00);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F9D423, #e65c00);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 50px;
  font-size: 20px;
  font-family: Segoe UI;
  text-align: center;
  border-radius: 7px;
  position: initial;
}

#list1 a {
  border: 1px solid #ddd;
  border-radius: 7px;
  margin-top: -1px;
  /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color: #f6f6f6;
  display: block;
}

#list1 li a:hover {
  background-color: #FCF3CF;
}

#list2 {
  width: 25%;
}

#h2 {
  background: #00b09b;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #96c93d, #00b09b);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #96c93d, #00b09b);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 50px;
  font-size: 20px;
  font-family: Segoe UI;
  text-align: center;
  border-radius: 7px;
}

#list2 a {
  border: 1px solid #ddd;
  border-radius: 7px;
  margin-top: -1px;
  /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color: #f6f6f6;
  display: block;
}

#list2 li a:hover {
  background-color: #b8ede2;
}

#list3 {
  width: 25%;
}

#h3 {
  background: #36D1DC;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #5B86E5, #36D1DC);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #5B86E5, #36D1DC);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 50px;
  font-size: 20px;
  font-family: Segoe UI;
  text-align: center;
  border-radius: 7px;
}

#list3 a {
  border: 1px solid #ddd;
  border-radius: 7px;
  margin-top: -1px;
  /* Prevent double borders */
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  background-color: #f6f6f6;
  display: block;
}

#list3 li a:hover {
  background-color: #D6EAF8;
}

p.invisible {
  visibility: hidden;
  display: inline;
  font-size: 0.1px;
  text-align: center;
}

<!DOCTYPE html>
<html>
   <head>
      <link href="CSS/style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      </br>
      <div class="center">
         <input type="text" id="myInput" placeholder="Ingresa palabra a buscar">
      </div>
      </br>
      </br>
      <div class="center">
         <ul id="list1" class="list">
            <li id="h1">COMUNICADOS</li>
            <li class="des">
               <a target="_blank" href="#">
                  Cuenta NT
                  <p class="invisible">
                     Cuenta de red
                  </p>
               </a>
            </li>
            <li class="des">Document2</li>
            <li class="des">Document3</li>
         </ul>
         <ul id="list2" class="list">
            <li id="h2">TRAINING ON THE JOB</li>
            <li class="des">
               <a target="_blank" href="#">
                  Training On the Job
                  <p class="invisible">
                     Training On the Job
                  </p>
               </a>
            </li>
            <li class="des">Document2</li>
            <li class="des">Document3</li>
         </ul>
         <ul id="list3" class="list">
            <li id="h3">DOCUMENTOS</li>
            <li class="des">
               <a target="_blank" href="#">
                  Procedimiento Atención Usuario VIP
                  <p class="invisible">
                     VIP
                  </p>
               </a>
            </li>
            <li class="des">Document2</li>
            <li class="des">Document3</li>
         </ul>
      </div>
   </body>
</html>

最佳答案

从 .center 类中删除 align-items:center; 并添加 margin-top:20px//或任何你想要的值到 .list 类。

https://jsfiddle.net/64f50c97/1/

关于javascript - 使用 div 将标题固定在适当的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46087897/

javascript - 使用 div 将标题固定在适当的位置

上一篇：Javascript - CSS 幻灯片不显示默认图像

下一篇：javascript - 如何单独渲染子组件的样式？