两个input，不能并排紧贴在一起，中间有空隙

最新推荐文章于 2024-05-22 21:53:11 发布

青天诀

最新推荐文章于 2024-05-22 21:53:11 发布

阅读量3.8w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： web前端布局 input

本文链接：https://blog.youkuaiyun.com/u012193330/article/details/45689541

Web前端专栏收录该内容

123 篇文章

订阅专栏

本文探讨了在网页布局中遇到的input标签间距问题，并提供了通过使用浮动属性来解决该问题的方法。

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

做搜索框布局时，发现对input标签无法紧贴在一起，中间会出现空隙

 <div class="right-content">         
    <form action="" class="search">
        <input type="text" class="search_key" value="keywords"/>
        <input type="submit" class="btn_submit" value="Go"/>
    </form>
</div>

.right-content{
    width: 260px;
    background: #fff;
    float: left;
    margin-left: 10px;
    overflow: hidden;
}

form{
    padding: 0;
    margin: 0;
}

.search{
    width: 220px;
    height: 40px;
    padding: 20px;
    overflow: hidden;
}

.search_key{
    width: 120px;
    height: 38px;
    line-height: 40px;
    font-size: 20px;
    color:#ddd;
    border: 1px solid #ddd;
    padding-right: 10px;
    padding-left: 40px;
    background: url(../img/search.gif) no-repeat 5px 5px ;
}

.btn_submit{
    width: 44px;
    height: 40px;
    background: #ddd;
    font-size: 20px;
    color: #fff;
    border: 0;
}

这里写图片描述

图中分别为在firebug下，选中search_key和btn_submit时，元素对应的区域范围，中间会出现对应的空隙。
本来btn_submit宽度应为48px，但是由于中间的空隙占用，如果设置为48px，会出现btn_submit下移，我也没有搞清楚为什么。
最后通过对input添加浮动，才算正常