html - 编写一个带有图标的搜索栏

Question

我正在尝试编写以下布局。我弄乱了代码，不确定最好的方法是什么。

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

这是@paste bin的代码:

http://pastebin.com/KQR3mPiW

图片:

http://bayimg.com/IAPcpAACi

http://bayimg.com/JapcBaAci

Answer 1

给你:http://jsfiddle.net/SjafT/

预览:

您可能会更改“在 jsfiddle 中重新调整”部分的值。