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

最新推荐文章于 2021-06-03 03:27:39 发布

weixin_30432007

最新推荐文章于 2021-06-03 03:27:39 发布

阅读量176

点赞数

原文链接：http://www.cnblogs.com/taiyanghua0522/p/6090324.html

版权

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

<!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不一致导致的

转载于:https://www.cnblogs.com/taiyanghua0522/p/6090324.html

weixin_30432007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设置相同的高度，输入框和按钮底部不对齐

今天一个同学问了一个问题，说是如何解决输入框和按钮底部不对齐的问题，类似的代码如下：<!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *...
复制链接

扫一扫