调整浏览器大小时出现在屏幕上的图标

debugcn 发表于 Dev

JSK

我在使用图标（循环图标）时遇到问题，该图标在我调整浏览器大小时消失在屏幕上，并留下了空白，我使用的是Bootstrap和更少的内容，ii在页面上放置了一个链接以供您查看我的问题，并这也是代码

的HTML

<body>

    <header class="top-header">

        <div class="container">

            <div class="row">

                <div class="span6">
                    <h1 class="logo">
                        <a href="#" class="hide-text">Caspevi</a>
                    </h1>
                    <h2>Le Moteur de recherche</h2>
                </div>
                <div class="span6"></div>

            </div>

        </div>  
        <!-- end container  -->

    </header> 



    <!-- Recherche générale    -->

    <section>

        <div class="section-form1">

            <div class="container">


                <form action"/" method="post" class="genaral-form">

                    <p class="contour">

                        <a href="#"></a> 

                    </p>


                </form>



            </div>

        </div>


    </section>

    <!-- recherche personaliser  -->



</body>

的CSS

.section-form1 {
    background: url('../image/background_top.png') no-repeat center;
    background-color: #000;
    width: 100%;
        height: 694px;

    a {
        background: url('../image/forme_serche.png');
        width: 61px;
        height: 61px;
        position: absolute;
        top: -40px;
        left: 413px;
        &:hover {
        background: url('../image/forme_serche_hover.png');
        }
    }

}





.contour {
    position: relative;
    height: 239px;
    border: 1px solid white;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
        border-radius: 4px;
        margin-left: 120px;
        margin-right: 120px;
    margin-top: 80px;
}

tracyak13

我建议您将位置从绝对更改为相对。然后，您可以使用float：left和宽度百分比（百分比）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。