有如下两个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. 在LINUX终端和VIM下复制粘贴

    http://www.tinylab.org/linux-terminal-and-paste-copy-under-vim/ 在GUI界面下,我们可以很自由的复制粘贴.但是在字符界面下,我们不得不用 ...

  2. Google图片搜索

    本博文的主要内容有 .Google图片搜索的介绍 .Google图片之普通搜索    .Google图片之高级搜索 1.Google图片搜索的介绍   Google的图片搜索,不仅通过关键字查找拥有特 ...

  3. oracle sysdba用户远程登录

    sysdba远程登录需要两个条件: 1.remote_login_passwordfile =exclusive时,启用口令文件,允许远程登录: 查看remote_login_passwordfile ...

  4. Hibernate自定查询返回list<?>

    /** * * @param session * :一个会话 * * @param hql * :是需要执行的hql语句, * * @param offset * 设置开始位置 * * @param ...

  5. 自定义使用S缓存方法

    <?php $info=S("name","lizhaoyao"); $name=S("name"); var_dump($name) ...

  6. bzoj2822: [AHOI2012]树屋阶梯

    咦,这里有好多东西https://en.wikipedia.org/wiki/Catalan_number 每个矩形最多贡献一个拐角 枚举左上角的点和那个拐角是一个矩形 #include<cst ...

  7. TreeComboBox控件范例

    本文转载:http://www.cnblogs.com/hoodlum1980/archive/2008/01/30/1058140.html 在我印象中有很多各种各样的自定义控件(例如TreeLis ...

  8. 使用javah生成.h文件, 出现无法访问android.app,Activity的错误的解决

    在工程ndk22/bin/classes中 运行javah  com.cn.ndk22.Ndk22.Activity ,出现了.h文件 我在bin/classes目录中 ,就是无法访问, : 错误:无 ...

  9. 基于Visual C++2012拆解世界五百强面试题--题3

    请用C语言实现 输入N,打印N*N矩阵 比如 N = 3, 打印: 1 2 3 8 9 4 7 6 5 N = 4, 打印 1   2    3   4 12  13   14  5 11  16   ...

  10. 用的最多的Android Studio 快捷键

    1.Ctrl+D,Ctrl+C 复制删除整一行 2.Ctrl+Alt+L 格式化代码 看起来更好看 3.Ctrl+Q 查看函数API定义 4.Atl+方向键 切换不同文档 平时用快捷键能够提高效率,少 ...