我正在尝试编写以下布局.我搞砸了代码,不知道最好的方法是什么.
- <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:
图片: