用图像替换按钮标签并与文本字段对齐答案

【问题标题】：replacing button tags with images and aligning with a text field用图像替换按钮标签并与文本字段对齐
【发布时间】：2010-02-19 23:15:03
【问题描述】：

这对很多人来说很简单，我的 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;

}

这对于让徽标和文本字段与边距对齐很好，但是在让按钮元素与文本字段正确对齐时我一直遇到问题。

可能有更简单的方法可以做到这一点，我希望有人能指出我正确的方向。

编辑：请参阅下面的答案，这解决了对齐问题。但是，如果有人有更好的方法来整理我的代码，我们将不胜感激。

【问题讨论】：

标签： html css button

【解决方案1】：

似乎错位的罪魁祸首很简单，

#search {

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


}

改变的地方：padding-top:30px;

我认为是愚蠢的错误。

【讨论】：

【解决方案2】：

如果我理解正确，我会这样做（简化）：

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

所以基本上是相对定位而不是绝对定位，最后按钮在表单内浮动。

您还可以对 CSS 执行许多其他操作来简化和减少代码。

【讨论】：