javascript - 我如何消除差距

我使用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>

最佳答案

我猜您为每个<p/>元素使用了.show。因此，有一个默认的边距样式。

试试这个（设置边距：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>