设置相同的高度，输入框和按钮底部不对齐

今天一个同学问了一个问题，说是如何解决输入框和按钮底部不对齐的问题，类似的代码如下：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
		* {
			box-sizing:border-box;
		}
        input{
        padding:0;
		margin-right:20px;
        }
        div{
        height:40px;
        font-size:0;
        }
        #text{
        width:100px;
        height:40px;
        border:1px solid black;
        }
        #btn{
        width:60px;
        height:40px;
        line-height:40px;
        text-align:center;
        background:red;
        border:1px solid black;
        }
    </style>
    </head>
    <body>
        <div>
            <input type="text" id="text" />

            <input type="button" id="btn" value="按钮"/>
        </div>
    </body>
</html>

　　解决方法：给input便签加一个

input {
  vertical-align:bottom;  
}

　　vertical-align用于调整inline级的元素，这些元素的display是：inline ,inline-block,inline-table,

上述问题的原因就是他们的元素的vertical-align不一致导致的

posted on 2016-11-22 18:02 太阳花0525 阅读(1009) 评论(0) 收藏举报