Question

使用CSS3我试图显示带有玻璃图像的搜索框。我基本上是通过在文本框上放置图像并设置其left-margin来完成的。我的代码在这里：

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



#header-search{overflow:auto;}

#header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;


    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;

     border:1px solid #8e8e8e;

     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;

 }

#header-search input.button{
    border:0px dashed red;
    padding:0;
    margin:0 0 0 -185px;
    width:24px;
    height:24px;
    background:transparent url(../images/SearchImage.png) center center  no-repeat;
    float:left;
}

更新

我不是用em而不是px
我尝试过不同的css重置。
请参阅图片了解详情。
我在新的css / html文件中完成了此代码，其中没有其他代码行。

Answer 1

使用position:absolute似乎是一种更可靠的方法来处理这类事情。

HTML

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

CSS

.relative {
  position:relative;
}
.relative .button {
  position:absolute; 
  left: 20px;
  z-index:1;
}

您可能希望此css更具体针对此搜索输入，而不是所有.button等

Answer 2

这是因为您没有指定搜索输入框的宽度。如果你这样做，你的方法就可以了。

另外，当然，更好的方法是使用position：absolute来定位你的按钮。这将确保所有浏览器的布局。

Answer 3

如果您要为搜索输入框放置图片，可以试用此http://jsfiddle.net/HmKZQ/1/
如果您需要单击按钮，则可以尝试此操作 http://jsfiddle.net/HmKZQ/3/

左边距在所有浏览器中都有所不同？

3 个答案: