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