ギャップを取り除くにはどうすればいいですか？

Question

私のデータベースには、javascriptとphpを使ってユーザーをリストしています。それらの間にはギャップがあります。どのように私は私が望む絵の事

image

で。あなたが見ることができ、ギャップを削除することができますJavaScriptの

$(function(){ 
    $(".form-control").keyup(function() { 
     var searchid = $(this).val(); 
     var dataString = 'form-control='+ searchid; 
     if(searchid!='') 
     { 
      $.ajax({ 
      type: "POST", 
      url: "search.php", 
      data: dataString, 
      cache: false, 
      success: function(html) 
      { 
       $("#result").html(html).show(); 
      } 
      }); 
     } 
     return false;  
    }); 

    jQuery("#result").live("click",function(e){ 
     var $clicked = $(e.target); 
     var $name = $clicked.find('.name').html(); 
     var decoded = $("<div/>").html($name).text(); 
     $('#searchid').val(decoded); 
    }); 

    jQuery(document).live("click", function(e) { 
     var $clicked = $(e.target); 
     if (! $clicked.hasClass("form-control")){ 
      jQuery("#result").fadeOut(); 
     } 
    }); 

    $('#searchid').click(function(){ 
     jQuery("#result").fadeIn(); 
    }); 
}); 

CSS

#searchid 
    { 
    } 

    #result 
    { 
     position:absolute; 
     width: 100%; 
     padding:0px; 
     display:none; 
     margin-top:-1px; 
     z-index: 1000; 
     border-top:0px; 
     overflow:hidden; 
     border:1px #CCC solid; 
     background-color: white;  
    } 

    .show2 
    { 
     background-color: red; 
     font-size:30px; 
     border:10px #CCC solid; 
    } 

    .show2:hover 
    { 
     background:#4c66a4; 
     color:#FFF; 
     cursor:pointer; 
    } 

HTML

<input type="text" class="form-control" id="searchid" placeholder="Arama" > 
<div id="result"> 
</div> 

Answer 1

私はすべての.show要素のためのあなたの使用<p/>を推測します。したがって、デフォルトのマージンスタイルがあります。

は（：0;クラスshowを持つすべての要素のためのマージンを設定）：これを試してみてください

#searchid 
 
    { 
 
    } 
 

 
    #result 
 
    { 
 
     position:absolute; 
 
     width: 100%; 
 
     padding:0px; 
 
     display:none; 
 
     margin-top:-1px; 
 
     z-index: 1000; 
 
     border-top:0px; 
 
     overflow:hidden; 
 
     border:1px #CCC solid; 
 
     background-color: white;  
 
    } 
 

 
    .show2 
 
    { 
 
     background-color: red; 
 
     font-size:30px; 
 
     border:10px #CCC solid; 
 
     margin:0; 
 
    } 
 

 
    .show2:hover 
 
    { 
 
     background:#4c66a4; 
 
     color:#FFF; 
 
     cursor:pointer; 
 
    }

<input type="text" class="form-control" id="searchid" placeholder="Arama" > 
 
<div id="result" style="display:block"><!-- i overide style to display block for try, remove attribute display --> 
 
<p class='show2'>i used P</p> 
 
<div class='show2'>i used div</div> 
 
<div class='show2'>i used div</div> 
 
</div>