私は、次の3つのカテゴリに分割し、フィルタ検索リストを作成したところ

Question

にヘッダを保つためにdivを使用：フィルターが素晴らしい作品

Documentos仕事

で

• Comunicados
• トレーニングこれらのカテゴリにネストされた用語のいずれかを探していますが、この操作が実行されたときにヘッダーが邪魔になります。

  たとえば、「Cuenta NT」と入力すると、他の2つのヘッダーが下に移動します。

  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>

Answer 1

.centerクラスからalign-items:center;を削除し、.listクラスにmargin-top:20px //or whatever value you wantを追加します。私はあなたが<ul>と<li>を使用している参照

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

Answer 2

、進むべき道は.centerに.listとdisplay: table;に

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

を追加することです。

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 { 
 
    align-items: center; 
 
    border: 3px solid hsl(85, 68%, 40%); 
 
    display: table; 
 
    justify-content: center; 
 
    margin-bottom: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 80%; 
 
} 
 
.container { 
 
    border: 3px solid hsl(85, 68%, 40%); 
 
    display: flex; 
 
    margin: auto; 
 
    width: 80%; 
 
} 
 
#myInput { 
 
    border: 1px solid hsl(0, 0%, 80%); 
 
    border-radius: 5px; 
 
    font-size: 14px; 
 
    margin-left: 20px; 
 
    padding: 10px; 
 
    width: 60%; 
 
} 
 
.list { 
 
    background-color: hsl(0, 0%, 96%); 
 
    color: hsl(0, 0%, 0%); 
 
    display: table-column; 
 
    margin-top: 20px; 
 
    float: left; 
 
    font-size: 18px; 
 
    list-style: outside none none; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    padding: 0; 
 
    top: 0; 
 
} 
 
.list li:nth-child(1) { 
 
    font-weight: bold; 
 
    margin-bottom: 5px; 
 
} 
 
#list1 { 
 
    width: 25%; 
 
} 
 
#h1 { 
 
    background: hsla(0, 0%, 0%, 0) linear-gradient(to right, hsl(50, 95%, 56%), hsl(24, 100%, 45%)) repeat scroll 0 0; 
 
    border-radius: 7px; 
 
    font-family: Segoe UI; 
 
    font-size: 20px; 
 
    height: 50px; 
 
    position: initial; 
 
    text-align: center; 
 
} 
 
#list1 a { 
 
    background-color: hsl(0, 0%, 96%); 
 
    border: 1px solid hsl(0, 0%, 87%); 
 
    border-radius: 7px; 
 
    color: hsl(0, 0%, 0%); 
 
    display: block; 
 
    font-size: 18px; 
 
    margin-top: -1px; 
 
    padding: 8px; 
 
    text-decoration: none; 
 
} 
 
#list1 li a:hover { 
 
    background-color: hsl(48, 88%, 90%); 
 
} 
 
#list2 { 
 
    width: 25%; 
 
} 
 
#h2 { 
 
    background: hsla(0, 0%, 0%, 0) linear-gradient(to right, hsl(82, 56%, 51%), hsl(173, 100%, 35%)) repeat scroll 0 0; 
 
    border-radius: 7px; 
 
    font-family: Segoe UI; 
 
    font-size: 20px; 
 
    height: 50px; 
 
    text-align: center; 
 
} 
 
#list2 a { 
 
    background-color: hsl(0, 0%, 96%); 
 
    border: 1px solid hsl(0, 0%, 87%); 
 
    border-radius: 7px; 
 
    color: hsl(0, 0%, 0%); 
 
    display: block; 
 
    font-size: 18px; 
 
    margin-top: -1px; 
 
    padding: 8px; 
 
    text-decoration: none; 
 
} 
 
#list2 li a:hover { 
 
    background-color: hsl(168, 60%, 83%); 
 
} 
 
#list3 { 
 
    width: 25%; 
 
} 
 
#h3 { 
 
    background: hsla(0, 0%, 0%, 0) linear-gradient(to left, hsl(221, 73%, 63%), hsl(184, 70%, 54%)) repeat scroll 0 0; 
 
    border-radius: 7px; 
 
    font-family: Segoe UI; 
 
    font-size: 20px; 
 
    height: 50px; 
 
    text-align: center; 
 
} 
 
#list3 a { 
 
    background-color: hsl(0, 0%, 96%); 
 
    border: 1px solid hsl(0, 0%, 87%); 
 
    border-radius: 7px; 
 
    color: hsl(0, 0%, 0%); 
 
    display: block; 
 
    font-size: 18px; 
 
    margin-top: -1px; 
 
    padding: 8px; 
 
    text-decoration: none; 
 
} 
 
#list3 li a:hover { 
 
    background-color: hsl(205, 71%, 91%); 
 
} 
 
p.invisible { 
 
    display: inline; 
 
    font-size: 0.1px; 
 
    text-align: center; 
 
    visibility: hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link href="CSS/style.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 
\t \t 
 
<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 
 
\t <p class="invisible"> 
 
\t Cuenta de red 
 
\t </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 
 
\t <p class="invisible"> 
 
\t Training On the Job 
 
\t </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 
 
\t <p class="invisible"> 
 
\t VIP 
 
\t </p></a></li> 
 
    <li class="des">Document2</li> 
 
    <li class="des">Document3</li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>