검색 기능에 여백 추가하기

Question

내 문제는 검색 기능을 사용할 때 모든 4 번째 그림에 여백이 없어서 모든 사진이 서로 붙어 있다는 것입니다. 모든 div가 특정 div에 맞아야하기 때문에 모든 행이 끝날 수 없기 때문입니다. 여백 또는 패딩. 그러나 예를 들어 검색에서 4 번째와 5 번째 그림이 나오면 4 번째, 8 번째 및 12 번째 그림에 여백이 없으므로 함께 검색됩니다. 다른 모든 사진의 오른쪽 여백은 60 픽셀입니다. 확실히 가장 좋은 방법을

 li:nth-child(4) { 
     margin-right: 0px; 
     } 

    li:nth-child(8) { 
     margin-right: 0px; 
     } 
    li:nth-child(12) { 
     margin-right: 0px; 
     } 

을하지만 그것은 내가 그것을 관리하는 방법을했다만을 생각했다 :

나는 그런 0으로 마진을 얻을 수 있었다.

HTML :

<header class="main-header"> 

    <form id="live-search" class="styled" method="post"> 
    <fieldset> 
     <input type="text" class="text-input input"  placeholder="Search.." id="filter" value="" /> 
    </fieldset> 
    </form> 
</header> 
<div class="container"> 
     <ul class="list" id="imageGallery"> 
      <li> 
       <a href="photos/01.jpg" data-lightbox="image-1" data-title="Title"> 
       <img src="photos/thumbnails/01.jpg" alt="Text"> 
       </a> 
       <p>Title text</p> 
      </li> 
      ........ 
     </ul> 
    </div> 

및 검색 기능이 같다 :

$(document).ready(function(){ 
    $("#filter").keyup(function(){ 

    // Retrieve the input field text 
    var filter = $(this).val(); 

    // Loop through the list 
    $(".list li").each(function(){ 

     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
      $(this).fadeOut(); 

     // Show the list item if the phrase matches 
     } else { 
      $(this).show(); 
     } 
    }); 

    }); 
}); 

들이 검색 할 때 행의 끝에있는 사진에 여백을 추가 할 수있는 빠른 방법이 있나요?

편집 : 프로젝트에

추가 Github에서 링크 : 당신은보다 효과적으로 :nth-child을 사용할 수 있습니다 Github

Answer 1

.

당신이 한 줄에 4 개 항목이 알고있는 경우에 ..... :nth-child(4n) 모든 4 항목 (4, 8, 12, 16 등)

.container { 
 
    margin: 20px auto; 
 
    max-width: 400px; 
 
    font-size: 0.7em; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin:0; 
 
    padding:0; } 
 

 
li { 
 
    margin-bottom: .25em; 
 
    padding: .25em; 
 
    background: #eee; 
 
    text-transform: uppercase; 
 
} 
 

 
li:nth-child(4n) { 
 
    background: #aae; 
 
    color: #fff; 
 
    font-weight: bold; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li>List Item 1</li> 
 
    <li>List Item 2</li> 
 
    <li>List Item 3</li> 
 
    <li>List Item 4</li> 
 
    <li>List Item 5</li> 
 
    <li>List Item 6</li> 
 
    <li>List Item 7</li> 
 
    <li>List Item 8</li> 
 
    <li>List Item 9</li> 
 
    <li>List Item 10</li> 
 
    <li>List Item 11</li> 
 
    <li>List Item 12</li> 
 
    </ul> 
 
</div>