使用div来保持标头到位

时间：2017-09-07 04:36:18

标签： javascript html5 css3

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

  • Comunicados
  • 在职培训
  • Documentos

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

例如，只要您输入短语“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>

2 个答案:

答案 0 :(得分：1)

从.center班级中移除margin-top:20px //or whatever value you want，然后将.list添加到班级。

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

答案 1 :(得分：0)

我发现您正在使用<ul>和<li>，要做的就是添加

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

到.list和display: table;到.center。

＆＃13;
＆＃13; 
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';
       });
     }
     
  });
});
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题