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;


}

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

我认为是愚蠢的错误。

Answer 2

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

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

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

还有很多其他的东西可以用来简化和减少代码。

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

2 个答案: