相信大家一定遇到过input与其他元素无法对齐的情况，不论type是text、radio、CheckBox，由于input有其独特的默认样式，padding和border、行高、字体样式等。
1.radio、CheckBox类型：
- 这两个在设置好大小后使用position：relative，设置top值，根据相邻元素高度去设置，一般情况下都没问题
- 第二种就是设置input父元素为相对定位，设置上和左的padding，input设置绝对定位，及时相邻文本换行也不会影响
2.text类型，移动端对齐问题居多，PC端没对齐一般是由于input的padding和高度不一致造成的
- 设置input的border、outline为none，父元素设置一个固定的行高，字体和相邻元素保持一致，即使input的高度和相邻元素不一样，但依旧可以对齐。
*{box-sizing: border-box;}
div{line-height: 30px;}
div,input{font-size: 20px;}
input{border:none;outline: none; }
- 第二种就是设置input的vertical-align: -1px;如果设置为middle或top、bottom，在不同浏览器可能会不一样，实测vertical-align: -1px;基本能对齐
3.input[type=text]和button的对齐：
input和button天然就会自动垂直居中对齐，行高默认等于其本身的高度，button默认的vertical-align对齐方式是baseline，将vertical-align设置为top、bottom、middle任意一个值都能对齐（在他们的高度相同情况下），如需消除button和input的空隙，要么代码不换行，要么设置它们父元素的font-size为0，要么将button设置浮动。
