开发者社区> 问答> 正文

input 和 span 之间有烦人的缝隙?该怎么破

有一个比较诡异的问题想请教一下各位。

如图,我想做一个搜索框,后面会紧挨一个搜索按钮的效果。
但是发现这个搜索框和按钮之间会有缝隙,请问这个是什么原因造成的,该怎么破?
screenshot
HTML:

<input id="jbzb_searchbox" type="text" placeholder="输入床号或姓名" />
<span id="search" class="btn_search" onmousedown="this.className+=' active'"  onmouseup="this.className='btn_search';">搜索</span>

CSS:

#jbzb_searchbox{
    margin:0;padding:1px 0 1px 4px;margin-left:30px;border-radius:0; -webkit-border-radius:0;-moz-border-radius:0;border:1px solid #CAC7CD;color:#585655;
}
.btn_search{
    display:inline-block;width:76px;border:1px solid #CAC7CD;border-left:none;text-align:center;cursor:pointer;height:22px;line-height:22px;color:#565855;
    background:url(../images/sbtn_b.png) -1px -1px no-repeat;
}

展开
收起
a123456678 2016-05-27 15:20:50 2863 0
1 条回答
写回答
取消 提交回答
  • 似乎是和换行有关系的,当你把span和input放一行时就没有问题。

    可以通过float 或 margin-left 来解决。margin-left 可能会有不同浏览器的兼容性,建议使用float吧。

    2019-07-17 19:18:00
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
一起来试验保险箱的脆弱面 立即下载
一起来试验 保险箱的脆弱面 立即下载
重新定义儿童饮水习惯 立即下载