用圖像替換按鈕標籤並與文本字段對齊

Question

這對很多人來說都很簡單，我的CSS技能有些生疏，希望找到解決這個問題的最佳解決方案。

這是我目前的html代碼。

<div class="head_wrap"> 
<div id="logo"></div> 
<div id="search"> 
<form action=""> 
    <input type="text" name="search" id="search" /> 
    <button id="replacement-2"></button> 
</form></div> 

</div> 

我想在這裏實現的，是有它的頁面集中DIV元素，對準左邊的標誌，對準到右頁邊距（文本字段，按鈕，在搜索框中元素相應對齊）

我自己在互聯網上研究的方法似乎導致了一些問題。

這是我目前的CSS。

.head_wrap { 

width: 1024px; 
margin: 0px auto; 
position:relative; 

} 

#logo { 

width:334px; 
height: 100px; 
position: absolute; 
top:0; 
left:0; 
background-image: url('../images/logo.png'); 
background-repeat: no-repeat; 

} 

#search { 

width: 241px; 
height: 30px; 
float: left; 
padding-top:30px; 
position: absolute; 
top:15px; 
right:40px; 


} 

#search input { 


border: 0; 
background: url('../images/search_bg.png') top left no-repeat; 
width: 211px; 
height: 25px; 
padding-bottom: 3px; 
padding-top: 3px; 
padding-left: 5px; 
padding-right:5px; 
font-size: 75%; 
color: #FFF; 
float:left; 

} 

#replacement-2 { 
width: 30px; 
height: 30px; 
padding: 50px 0 0; 
margin: 0; 
border: 0; 
right:0px; 
top:0; 
background: transparent url('../images/search_button.png') no-repeat center top; 
overflow: hidden; 
cursor: pointer; /* hand-shaped cursor */ 
cursor: hand; /* for IE 5.x */ 
float:right; 
} 
form>#replacement-2 { /* For non-IE browsers*/ 
height: 0px; 

} 

這是罰款獲得的徽標和文本字段對齊到邊緣，但我有在獲得按鈕元素與文本字段正確排列恆定的問題。

有可能是一個更簡單的方法來做到這一點，我希望有人能指出我在正確的方向。

編輯：看到我的答案在下面，這解決了對齊問題。但是，如果任何人有更好的方式來完成我的代碼，貢獻將不勝感激。

Answer 1

似乎是罪魁禍首的失準是一個簡單的事情，

#search { 

    width: 241px; 
    height: 30px; 
    float: left; 
    padding-top:18px; 
    position: absolute; 
    top:15px; 
    right:40px; 


} 

哪裏改變：填充頂：30PX;

我覺得愚蠢的錯誤。

Answer 2

如果我理解正確的話，我會做這個（簡體）：

#wrap {} 
#logo {float: left; position: relative;} 
#search {float: right; position: relative} 
#search #button {float: right;} 

所以基本上相對的定位，而不是絕對定位，終於在表單中右浮動按鈕。

還有很多其他的東西可以對CSS進行簡化和減少代碼。