html – 编码一个带有图标的搜索栏

我正在尝试编写以下布局.我搞砸了代码,不知道最好的方法是什么.

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

这里是代码@贴子bin：

http://pastebin.com/KQR3mPiW

图片：

http://bayimg.com/IAPcpAACi

http://bayimg.com/JapcBaAci

解决方法

这里你去： http://jsfiddle.net/SjafT/

预习：

您可以更改“在jsfiddle中重新调整”的值.

原文地址：https://www.jb51.cc/html/223981.html