带有图像的锚标记在浏览器页面上移动调整大小

Question

我正在开发一个搜索应用程序，其要求是在搜索文本框上放置放大镜图像而不是按钮。

在最大化页面上，锚似乎位于正确的位置。

但是在浏览器调整大小（点击关闭按钮旁边的恢复按钮）时，搜索文本框如下所示：

以下是我的CSS代码（我不是CSS家伙btw：））

.search_div A 
{
 background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
 border: 1px solid #CCCCCC;
 height: 11px;
 left: 85.8%;
 margin-right: 175px;
 padding: 6px 5px 4px 20px;
 position: fixed;
 top: 32px;
 width: 0;
}

请建议。

Answer 1

您没有为搜索按钮/输入显示完整标记，因此很难准确了解您如何准确定位搜索按钮。

我将如何做到这一点。假设您有以下标记：

<div class="search_div">
    <a href="#">Search</a>
    <input type="text" />
</div>​

对于包装DIV，关键是明确地将它相对定位：

.search_div { 
    position: relative;
    border: 1px solid LightGrey; 
    width: 300px;
}

对于搜索按钮，将其设为绝对值，left值等于零，使其粘在左侧。

.search_div A {
    background: url(icon.gif) no-repeat scroll center center #FFFFFF;
    border: 1px solid #CCCCCC;
    width: 16px;
    height: 16px;
    left: 0;
    position: absolute;
    text-indent: -99999px;
}

由于锚是绝对定位的，输入将位于下方。 技巧是将输入的左侧填充到比锚点宽度稍高的值，因此文本的开头不会隐藏在锚点下面：

.search_div input {
    box-sizing: border-box;
    border: 0;
    outline: 0;
    line-height: 16px;
    width: 100%;
    padding-left: 20px;
    padding-right: 3px;
}

<强> DEMO

---

你可以进一步使用这种技术，然后通过css通过向.search_div容器应用一个额外的类来向左或向右显示搜索图标。

向左或向右粘贴搜索图标：

.search_div.iconleft a {
    left: 0;
    right: auto;
}

.search_div.iconright a {
    left: auto;
    right: 0;
}

也可以向左或向右调整输入的填充：

.search_div.iconleft input {
    padding-left: 20px;
    padding-right: 3px;
}

.search_div.iconright input {
    padding-right: 20px;
    padding-left: 3px;
}

<强> DEMO

Answer 2

行position:fixed;很可能是故障点，因为它使元素相对于浏览器窗口固定，这就是为什么在浏览器调整大小时看到元素移位的原因。

您要做的是将position: relative;应用于您希望锚点相对的a锚元素及其父元素.search_div。一旦锚相对于其包含元素定位，您可以使用css属性“left，right，top和bottom”根据需要定位它。