请问一下倒数第十行的height问题。

<html>


<head>

    <title>bing search</title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }


    body {

        background: #333;

    }


    .bg {

        background-image: url(http://img.mukewang.com/52da5e7d0001c0f813660768.jpg);

        width: 1366px;

        height: 648px;

    }


    .logo {

        background: url(http://img.mukewang.com/52da5e530001eea901070053.jpg) no-repeat;

        width: 107px;

        height: 53px;

        float: left;

        margin-top: -10px;

        margin-right: 20px;

    }


    .search-form {

        float: left;

        background-color: #fff;

        width: 407px;

        padding: 5px;

    }


    .search-box {

        position: absolute;

        top: 20%;

        left: 8%;

    }


    .input-text {

        float: left;

        font-size: 100%;

        width: 375px;

        height: 30px;

        line-height: 30px;

        outline: none;

        border: 0;

    }


    .input-submit {

        float: left;

        height: 29px;

        width: 29px;

        /*图片位于document位置 x=30px y=107px*/

        background: transparent url(http://img.mukewang.com/52da5df800012b1e02220137.jpg) no-repeat -30px -107px;

        border:0;

        cursor: pointer;

    }

    #content {

    background: white;

    overflow: hidden;

    width: 375px;

    height: 150px;

    font-size: 16px;

    display: none;

    }

    #content ul li {

    padding: 5px 5px 5px 10px;

    }

    #content ul li:hover {

    background-color:#ccc;

    cursor: pointer;

    text-decoration: underline;

    }

    </style>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>


<body>

    <div class="bg">

        <div class="search-box">

            <div class="logo"></div>

            <form action="https://www.bing.com/search" target="_blank" method="get" class="search-form">

                <input type="text" id="search_content" class="input-text" name="wd">

                <input type="submit" class="input-submit" value="">

            </form>

        </div>

        <div id="content">

        <ul>

        <li>匹配结果1</li>

        <li>匹配结果2</li>

        <li>匹配结果3</li>

        </ul>

        </div>

    </div>

</body>

<script type="text/javascript">

$("#search_content").keyup(function(event) {

/* Act on the event */

$("#content").show();

$("#content").css({

left: $(".search-form").offset().left,

top: $(".search-form").offset().top+$("#search_content").height()+10,/*这里为什么是加10呢,我看了一下上面代码padding只是设置了5px*/

position:"absolute"

});

});

$(document).click(function(event) {

$("#content").hide();

});

</script>

</html>


大大张伟大
浏览 1550回答 1
1回答

weenhall

什么意思
打开App,查看更多内容
随时随地看视频慕课网APP