CSS使输入框和按钮在同一行

最新推荐文章于 2024-05-02 16:11:40 发布

STATICHIT静砸

最新推荐文章于 2024-05-02 16:11:40 发布

阅读量2.3k

点赞数 3

分类专栏： html+css+JavaScript等文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_62742402/article/details/125614833

版权

html+css+JavaScript等专栏收录该内容

57 篇文章 0 订阅

订阅专栏

效果：

代码：

html：
        <input type="text" class = "in"  placeholder = "请输入手机验证码"/>
        <button class="vCode">获取验证码</button><br/>
CSS：
    .in{
            font-size: 18px;
            width: 45%;
            outline: none;
            border: none;
            border-bottom: 1px solid #dcd4fe;
            color: #2b2b33;
            margin-left: 15%;
            margin-bottom: 10px;
            padding: 4px 0;
            display: inline-block;//重点就是这一句
        }

        .vCode{
            color: #333131;
            background: #e5dce1;
            width: 25%;
            height: 40px;
            border-radius: 15px;
            border: none;
        }

重点就是靠左者的属性中： display: inline-block；