前端 —— button和input不对齐的解决方法

最新推荐文章于 2024-01-05 14:15:42 发布

大超_Richard

最新推荐文章于 2024-01-05 14:15:42 发布

阅读量875

点赞数

分类专栏：前端相关

本文链接：https://blog.csdn.net/weixin_44448873/article/details/103599201

版权

前端相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在CSS中添加

vertical-align:middle;

示例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input{
            width: 300px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #b0b0b0;
            border-right: 0px;
            vertical-align:middle; // 添加此属性
        }
        .btn{
            width: 100px;
            height: 40px;
            line-height: 40px;
            border: 0px;
            background-color: #3385FF;
            color: white;
            vertical-align:middle; // 添加此属性
        }
    </style>
</head>
<body>
    <div style="text-align: center">
        <input type="text" class="input"><input type="button" class="btn" value="百度一下">
    </div>
</body>
</html>

未添加之前↓↓↓

添加之后↓↓↓

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大超_Richard

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端 —— button和input不对齐的解决方法

在CSS中添加vertical-align:middle;示例源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .in...
复制链接

扫一扫