HTML中input标签对齐问题

今天在练习的时候遇到了一点小问题，稍作记录希望下次遇到可以有点印象。

简单说明一下就是要编写一个搜索框，搜索框分为两块，一块是左边的文本框s_text，一块是右边的搜索按钮s_button，具体的HTML代码如下：

<div class="searchbox">
	<input class="s_text" type="text" value="hotwords"><a href="#"><input class="s_button" type="button" value="搜索"></a>
	//此处文本框和按钮两个input没有换行；
</div>

再配以适当的CSS代码：

* {
	margin: 0;
	padding: 0;
}
input{
	border: 0;
	outline: none;
	background: none;
}
.searchbox{
	width: 546px;
	height: 32px;
	border: 2px solid #e2231a;
	margin: 0 auto;
}
.searchbox input.s_text{
	width: 468px;
	height: 32px;
	padding-left: 20px;
	background-color: #ffffff;
}
.searchbox a input.s_button{
	width: 58px;
	height: 32px;
	cursor: pointer;
	background-color: #e2231a;
}

效果图如下：

此时问题就已经出现了：input文本框往下偏移了一点点。

然而在修改按钮文字为图片背景时，即修改代码为：

<div class="searchbox">
	<input class="s_text" type="text" value="hotwords"><a href="#"><input class="s_button" type="button"></a>
	//此处第二个input去掉了value值；
</div>

效果图如下：

问题似乎更大了：input文本框与input按钮"看起来"完全不在一条水平线上。

出现这两个问题的原因就在于input标签的display属性是inline-block，内联块级元素，和img等其他内联元素一样，他们在块级元素中默认是水平排列，就会有一个默认的vertical-align属性，vertical-align默认值是baseline，也就是基线对齐。

没有value值的按钮基线是下边框，而有value值的文本框的基线是文字底部。

所以我们仔细看，其实右边的input按钮的下边框与左边的input文本框中的文字是底部是对齐的：

那么如何解决这两个问题呢，有两个很简单的方法：

1. 将input按钮的vertical-align属性值设置为middle或top；

.searchbox a input.s_button{
	width: 58px;
	height: 32px;
	cursor: pointer;
	vertical-align: middle; //修改对齐方式
	background-color: #e2231a;
	background: url(img/search.png) no-repeat 50% #e1251b;
}

2. 将input标签修改为块级元素display: block，此时如果需要文本框与搜索按钮处于同一行，则需要设置浮动，而float本身就会使该标签变为块级元素，所以我们只需要将input标签设置float: left即可。

input{
	border: 0;
	outline: none;
	background: none;
	float: left; //不要忘记上级元素的overflow，否则会造成高度塌陷。
}

修改后的最终效果图如下：

参考链接：
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/