我如何消除差距

Question

I list the users in my database using javascript and php.There are gaps between them. How can I remove the gap .You can see in the picture thing I want

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

i guess your used <p/> for every .show element. So there is have a default margin style.

Try this (set margin: 0; for every element with class 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>

</div>