10

下面的按钮与输入不对齐。输入必须与按钮处于同一高度，尽管输入的填充似乎对对齐有影响！padding-top 和 padding-bottom 之间的差异造成了按钮的这种移位。

我做了一个小提琴： http: //jsfiddle.net/3RMhm/10/来说明我的意思。

CSS：

.button {
    font-size: 15px;
    padding: 9px 23px;
    border:0;
}
.form  {
    width: 290px;
    background-color: #F9F9F9;
    font-size: 18px;
    color: #333;
    height: 25px;
    border:1px solid darkgray;
    padding-top: 15px;         <--- This padding
    padding-bottom: 0px;       <--- And this padding
}

HTML：

<input name="name" class="form" /> 
    <input class="button" type="submit">
4

3 回答 3

23

只需添加vertical-align: middle到两个元素（按钮和输入）。

http://jsfiddle.net/3RMhm/3/

于 2013-09-05T18:55:37.303 回答
3

利用：

vertical-align:middle;
margin-top: -5px;

http://jsfiddle.net/Hive7/3RMhm/2/

于 2013-09-05T18:55:06.867 回答
0

在您的班级中，.form只需将值更改为：padding-toppadding-bottom

.form  {

    padding-right: 4px;
    padding-bottom: 8px;

}
于 2013-09-05T18:57:55.507 回答