input type为text和button的不对齐问题以及之间的小空格

最新推荐文章于 2024-09-21 21:57:19 发布

Aman920_

最新推荐文章于 2024-09-21 21:57:19 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/MrZZhou/article/details/72757936

css 专栏收录该内容

14 篇文章

订阅专栏

文章讲述了在Chrome浏览器中遇到input文本框和button按钮对齐问题，以及它们之间小空格的问题。尽管在Firefox和IE下表现正常，但Chrome中存在对齐异常。作者尝试多种解决方案，包括设置vertical-align、使用浮动布局和通过value为空格来调整。同时，提到了input元素间的空格是因为它们是inline-block元素的特性，可以通过设置父元素font-size为0或移除空格来消除间隔。

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

今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊”

就像这样子：

咦怎么会我看看代码没毛病啊同样的height、同样的line-height，各有一个width（复习一下，input属于inline-block元素）

倒腾了好久感觉甚是诡异现在回想怎么没有赶紧百度下踩过这个坑的前辈们也是不少啊

首先要说明的是这个现象只会出现在Chrome中没想到这次会是Chrome的锅在Firefox和IE下都比较正常

至于原因呢。。。有人这么说，不过我已经把它们的border、padding都设为0了，还是对不齐，所以不敢苟同，希望知道的大大告知

而解决方案呢，这就比较多了

1.包裹+浮动：如span+float：left

主要代码：

.text{
    padding:0;
    border:0;
    width:400px;
    height: 30px;
}
.but{
    border:0;
    padding: 0;
    width: 30px;
    height: 30px;
    background: url(so.svg);
}
span{
    float: left;
}

    <form>
        <span><input class="text" type="text" name="inputext" placeholder="请输入搜索内容"></span>
        <span><input class="but" type="button" name="but"></span>
    </form>

    <form>
        <input class="text" type="text" name="inputext" placeholder="请输入搜索内容">
        <input class="but" type="button" name="but">
    </form>

2.vertical-align

有三种设置方法任君选择：对button的加vertical-align:bottom/middle，或对text的加vertical-align:top

3.用空格value

这是我自己倒腾发现的，当button不设置width的时候，两者是会对齐的，当然是要给button加了value才能反映出来，这确实是挺奇怪的，所以把value内容换成空格也是可以的，当然这只是个小发现，生产中必然不可如此。

最后顺便说一下，button和text之间的空格

原因呢是他们是inline-block，必然带有内联元素的属性就是内容间的间隔

两个常用的方法;1.在父元素设置font-size:0px;2.去掉代码中两个input间的空格，有种显示上比较优雅的方式，就是用注释（这是从张鑫旭大神那看来的）