两个input之间或者input与button之间有空隙/间距（不能紧贴一起）解决方法！_CSS学习

资料来源：网络整理时间：2023/3/4 0:56:42 共计：3611 浏览

如上图所示，代码如下：

<form name="search" method="post" action="#">
    <input type="text" name="q" class="text" size="11" placeholder="输入关键词" />
    <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button>
</form>

在写搜索的时候，需要用到form、两个input或者input+button，但在写到CSS的时候，可能会遇到两个input之间或者input和button之间有空隙间距存在，那么如何解决呢？

看有空隙的CSS：

.search .text{width: 210px; height: 30px;line-height: 30px;margin-left: 30px; padding-left: 10px;margin-top: 20px;
    border: 3px solid #0073c6;}
.search .submit{width: 60px;height: 36px;line-height: 36px;margin-top: 20px;
 background-color:#e84807;border: 0;color: #fff;text-align: center;}

此时的CSS，会显示如上图，中间存在空隙！

解决方法：

在CSS第一行中，加入float:left，使input以及button浮动即可解决！

加入float:left后CSS：

.search .text{float:left;width: 210px; height: 30px;line-height: 30px;margin-left: 30px; padding-left: 10px;margin-    top: 20px;border: 3px solid #0073c6;}
.search .submit{width: 60px;height: 36px;line-height: 36px;margin-top: 20px;
    background-color:#e84807;border: 0;color: #fff;text-align: center;}

解决后截图：

如果你说此时也不好看，那么去修改CSS，不再简写input的蓝色边框，只保留上下左，右侧去除即可，或者移动右侧button，左侧移3px（margin-left:-3px）一样可以解决！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS font字体缩写_CSS学习 | ·下一条：CSS：图片列表鼠标触发显示图片标题_CSS学习