input和button对不齐，错位问题

贪吃蛇2120

已于 2023-07-05 18:39:39 修改

阅读量560

点赞数 3

文章标签： CSS button vertical-align 前端开发布局调整

于 2022-07-11 14:55:53 首次发布

本文链接：https://blog.youkuaiyun.com/cwb_2120/article/details/125721481

版权

本文介绍了如何通过在HTML按钮上添加vertical-align:top 属性实现元素垂直居中对齐，这对于前端布局具有实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

             input{
                    box-sizing: border-box;
                    padding-left: 20px;
                    width: 500px;
                    height: 40px;
                    border: none;
                    outline: none;
                    border: 2px solid #f10215;
                }
                button{
                    // vertical-align: top;
                    width: 80px;
                    height: 40px;
                    background-color: #f10215;
                    border: none;
                }

只需要在button上面加上一个 vertical-align: top; 这个属性就可以对齐了