有如下两个input:

<form action="http://www.example.com/index/search" method="get">
<div>
<input name="keyword" id="s" value="" size="23" type="text" />
<input src="/Public/img/search-button.jpg" value="search" type="image" />
</div>
</form>
css代码:
.search {
padding-top: 5px;
}
.search input{
vertical-align: top;
margin:;
border:;
}
.search #s {
padding: 0 1px 4px 5px;
background: url('search-bg.jpg') left top no-repeat;
width: 110px;
height: 28px;
}
出现如下图的bug:

两个input之让有空隙,不是紧挨着的,而我要的就是将这个空隙去掉,找了很多种方法,以下是我尝试的方法:

  • 使用绝对定位方式
    这种方法虽然能解决空隙问题,但是页面的布局又因为这个搜索框的定位而变乱了。(丢弃)
  • 清除padding和margin
    我将两个input的padding和margin都设为0,但是结果却让我失望,那个空隙还是存在。(丢弃)
  • 将图像搜索按扭的padding值设为负数
    这个结果是请教了群的朋友说的,但是还是解决不了问题,负数只是让图片往左少了,但是不能解决空隙的问题。(丢弃)

经过了这三个尝试无果的情况下,快要临近崩溃的边缘了,最后群里的另一个朋友看到我贴出的代码, 要让两个input之间没有空隙,则要让两个input在同一行,不能使用换行

我最后抱着一线希望再去尝试一下,将上面的html代码改至如下:

<form action="http://www.example.com/index/search" method="get">
<div>
<input name="keyword" id="s" value="" size="23" type="text" /><input src="/Public/img/search-button.jpg" value="search" type="image" />
</div>
</form>
结果,,,成了!!哈哈哈
 

如何让input之间无空隙的更多相关文章

  1. 解决input之间的空隙

    <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 怎么让挨着的两input之间没有空隙?

    问题:在写选项卡的时候,用input做点击事件的切换时,两个input之间会有空隙,使用margin/padding为0或者为负数依旧如此  → 解决:我脑慢的最后才想到是空格影响的,呵呵呵.

  3. 两个input之间有空隙,处理方法

    修改css,给前边一个input添加一个左浮动.   <input id="day" type="button" value="日" ...

  4. python123期末四题编程题 -无空隙回声输出-文件关键行数-字典翻转输出-《沉默的羔羊》之最多单词

    1. 无空隙回声输出 描述 获得用户输入,去掉其中全部空格,将其他字符按收入顺序打印输出. ‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬ ...

  5. html之给文本框设置宽度和高度/input的无边框效果

    <input name="" type="text" style="width:200px; height:20px;" /> ...

  6. Android开发消除横向排列的多个Button之间的空隙

    一.问题重述 摘要里描述的可能不太清楚,问题如下图: 如何消除Button1和Button2之间的空隙,以及Button与左右边界之间的空隙? 二.问题根源 这里出现的空隙其实是Button的背景图片 ...

  7. 解决div和img之间的空隙

    div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下. 先上代码和效果图: <!doctype html><html lang="en"& ...

  8. 关于行内元素之间有空隙的问题,例如span与input之间

    问题如图: 想要的是下面的效果,而却出现上面的效果,解决方法如下: 对于行元素span或者input来说 很多人会用inline-block来显示他们,但是往往发现  中间会留一段小空隙 , 其实这个 ...

  9. 怎样清除td和input之间空隙

    <style> input {background:red;border:none;height:30px;margin:0px} td {background-color:blue;pa ...

随机推荐

  1. 前谷歌首席 Java 架构师谈如何设优秀的 API

    随着近来软件规模的日益庞大,API编程接口的设计变的越来越重要.良好的接口设计可以降低系统各部分之间的相互依赖,提高组成单元的内聚性,降低组成单元间的耦合度,从而提高系统的维护性和稳定性. Joshu ...

  2. hdoj 3635 Dragon Balls【并查集求节点转移次数+节点数+某点根节点】

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  3. Maven学习总结(1-10)

    Maven学习总结(1-10) 本文转自 孤傲苍狼 博客,讲解精炼易懂,适合入门,链接及截图如下 http://www.cnblogs.com/xdp-gacl/tag/Maven%E5%AD%A6% ...

  4. jersey构建rest服务返回json数据

    1.  eclipse 创建 dynamic web project 2.  将jersey相关jar包放到libs目录下 3. web.xml 增加 jersey 相关内容 <?xml ver ...

  5. Eclipse(PHP、JAVA)的快捷键大全

    Eclipse是一个开放源代码的软件开发项目,专注于为高度集成的工具开发提 供一个全功能的.具有商业品质的工业平台.它主要由Eclipse项目.Eclipse工具项目和Eclipse技术项目三个项目组 ...

  6. VS2012的安装项目只能用InstallShield Limited Edition[附资源下载]

    以前版本的Visual Stuido中安装项目都可以使用微软自家的Visual Studio Installer,但是到了VS2012这一切都变了,只能用InstallShield Limited E ...

  7. JDK6 下载地址

    http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-41940 ...

  8. MySQL字符串函数

    字符串大写和小写转换 MySQL 字符串大写和小写转化函数有两对: lower(), uppper() 和 lcase(), ucase() mysql> select lower('DDD') ...

  9. 兼容性记录-class属性

    getAttribute获得class属性时,IE6,IE7的传參是className,IE7+和现代游览器都是class 全部游览器DOMElement均有的className属性,其在IE各版本号 ...

  10. Java_Activiti5_菜鸟也来学Activiti5工作流_之与Spring集成(三)

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...