Html 编码一个带有图标的搜索栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3845701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
coding a search bar with icon inside it
提问by Harsha M V
I am trying to code the following layout. I have messed up the code and not sure what's the best way to do it.
我正在尝试编写以下布局。我搞砸了代码，不知道什么是最好的方法。
<div class="search-wrapper">
<form action="search.php" method="get" name="search">
<div class="search-box"><img class="search-icon" src="images/search-icon.png" width="21" height="18" alt="search icon" />
<input name="seach" type="text" value="Search for dishes or restaurants" />
</div>
<input class="submit-button" name="Go" type="submit" />
</form>
</div>
#search {
height:125px;
overflow:hidden;
}
.search-wrapper {
width:465px;
height:45px;
background-color:#f0f0f0;
margin:43px auto 0;
border:1px solid #e9e9e9;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
position:relative;
}
.search-box {
width:375px;
height:32px;
background-color:#fff;
margin:5px 7px;
border:1px solid #cfcfcf;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
position:relative;
}
.search-box img.search-icon {
margin:8px 0 0 5px;
}
.search-box input {
border:none;
height:30px;
width:332px;
margin:0;
position:absolute;
font-size:16px;
padding-left:5px;
padding-right:5px;
}
input.submit-button {
background:url(../images/go-button.png) no-repeat;
text-indent:-9999px;
border:none;
height:32px;
width:68px;
position:absolute;
top:6px;
left:390px;
cursor:pointer;
//right:15px;
}
Here is the code @ paste bin:
这是代码@粘贴箱：
Images:
图片：
回答by Jeaf Gilbert
Here yo go: http://jsfiddle.net/SjafT/
在这里哟：http: //jsfiddle.net/SjafT/
Preview:
预览：
You might change the value of 'readjust in jsfiddle' part.
您可能会更改“在 jsfiddle 中重新调整”部分的值。
回答by bogatyrjov
Why do you use
你为什么用
position: absolute;
? Use
? 用
position: relative; float: left;
with the search box and the same with the button. No margin specification would be required either.
与搜索框和按钮相同。也不需要保证金规范。
