Question

我有一个图标（循环图标）的问题，当我调整浏览器大小并且剩下白色边距时我会离开屏幕，我使用bootstrap并且更少，ii推了一个{{ 3}}到页面，你可以看到我的问题，这也是代码

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;
}

Answer 1

您只需更换此行即可。绝对位置必须来自右边：

.section-form1 a {
...
left: 413px;
}

通过

.section-form1 a {
...
right: -27px;
}

此致

Answer 2

与上述答案一样，它只是位置问题：绝对。我建议你不要在特殊情况下使用位置：“绝对”或“固定”。响应/流体设计会遇到很多问题。

Answer 3

我建议您需要将位置从绝对更改为相对。然后，您可以使用float：left和宽度 - 边距，即百分比。

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

3 个答案: