0

我正在使用 html5 和 css3 做第一个站点。要显示带有搜索玻璃图像的文本框，我找到了这个帮助，它的效果很好： 在此处输入图像描述

这是代码：

HTML

<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />

CSS

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

我需要在文本框的右侧显示搜索图像我试图理解 CSS 但我无法理解。

你能指导我什么是文本框中的图像分组吗？由于 CSS 代码中没有显示属性，如何控制其显示和定位？

如何从文本框的左侧更改其显示？

谢谢

4

1 回答 1

1

在给定的示例中，填充使计算搜索框的实际宽度令人困惑（不是太令人困惑，但是有点）。

因此，首先看一下我通过修改您的示例所做的示例：示例

这里发生的实际情况是按钮排列在输入框旁边。但是我们通过提供 -24 的边距（这是图像的宽度）来强制它向左侧移动。所以通过减少 24px 的左边距使它看起来像在文本框中。现在，如果我们想将图像左对齐，那么我们可以将左边距减小到文本框的宽度，使其看起来像在左边。

margin:0 0 0 -200px;

这里 200px 是文本框的宽度。

左图示例

于 2012-08-18T12:49:24.570 回答