有如下两个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. FBReader移植日记 第二天

    昨天我们的移植工作进行了一大半,还留下两个重要的部分没有完成:1.没有移植的 ZLTextView,2.FormatPlugin相关的类. 第一个问题我们放在后面解决,下面先解决格式插件的问题. 我们 ...

  2. (转载)绿色版Mysql的安装配置

    本文出自于:http://johnnyhg.javaeye.com/blog/245544 一.下载MySQL http://www.mysql.org/downloads 我下载的是mysql-no ...

  3. MySQL生僻字(不常用字)的完整解决方案

    查看 MySQL 数据库服务器和数据库字符集 show variables like '%char%'; 查看 MySQL 数据表(table) 的字符集 show table status from ...

  4. iScroll使用

    新公司比较喜欢用iScroll,而我对此一无所知,特此调研iScroll用法,写在这里方便查看 IScroll是移动页面上被使用的一款仿系统滚动插件. myScroll = new IScroll(& ...

  5. LINQ 从 CSV 文件生成 XML

    本文参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx 下面的代码对字符串数组执行 LINQ 查询. 在 C# 版本中,该查询使用 let ...

  6. [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer

    Applications are driven by state. Many things, like the user interface, should always be consistent ...

  7. android 53 ContentProvider内容提供者

    ContentProvider内容提供者:像是一个中间件一样,一个媒介一样,可以以标准的增删改差操作对手机的文件.数据库进行增删改差.通过ContentProvider查找sd卡的音频文件,可以提供标 ...

  8. Qss

    *{ font-size:13px; color:white; font-family:"宋体"; } CallWidget QLineEdit#telEdt { font-siz ...

  9. 使用附加导航(affix)实现内容切换

    <!DOCTYPE html> <html> <head> <title> new document </title> <meta c ...

  10. Winform 程序中dll程序集嵌入exe可执行文件

    关于这方面,Google一下有很多方法,参考: http://blog.csdn.net/astonqa/article/details/7300856 但按照以上的方法我并没有成功,于是继续找到了一 ...