input文本框设置字体大小后导致按钮位置偏移解决方案

最新推荐文章于 2022-11-30 11:18:54 发布

SadItch

最新推荐文章于 2022-11-30 11:18:54 发布

阅读量3.2k

点赞数 4

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/zhang338448/article/details/106534102

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天写一个搜索框，遇到一点小问题，记录一下。

问题1：设置文本框和按钮在一行显示，两者高度一致，当设置文本框字体大小后，按钮位置发生偏移，如下图所示：

设置文本框字体大小前：

替换前

设置文本框字体大小后：

按钮位置明显向下偏移，网上查了一下，给文本框设置大小的同时，再设置垂直对齐方式为top即可，即

vertical-align: top;

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .search{
            width: 630px;
            height: 42px;
            border: solid 1px red;
            margin: 200px auto;
        }

        .txtSearch{
            outline: none;
            width: 500px;
            height: 40px;
            box-sizing: border-box;
            font-size: 24px;
            vertical-align: top;  /*设置垂直对齐方式*/
        }

        .btnSearch{
            width: 120px;
            height: 40px;
            outline: none;
            border: none;
            background-color: #0066CC;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="search">
        <input type="text" class="txtSearch">
        <input type="button" value="查询" class="btnSearch">
    </div>
</body>
</html>

问题2：为什么引入reset样式之后，两个input元素之间还是有一段间隔？

查阅之后，解决方案如下：

<input type="text" class="txtSearch">
<input type="button" value="查询" class="btnSearch">
<!--将上面换行写法，改成不换行即可-->
<input type="text" class="txtSearch"><input type="button" value="查询" class="btnSearch">

SadItch

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
input文本框设置字体大小后导致按钮位置偏移解决方案

今天写一个搜索框，遇到一点小问题，记录一下。设置文本框和按钮在一行显示，两者高度一致，当设置文本框字体大小后，按钮位置发生偏移，如下图所示：设置文本框字体大小前：设置文本框字体大小后：按钮位置明显向下偏移，网上查了一下，给文本框设置大小的同时，再设置垂直对齐方式为top即可，即vertical-align: top;demo代码如下：<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫