如何让input之间无空隙
有如下两个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;
}

两个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之间无空隙的更多相关文章
- 解决input之间的空隙
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 怎么让挨着的两input之间没有空隙?
问题:在写选项卡的时候,用input做点击事件的切换时,两个input之间会有空隙,使用margin/padding为0或者为负数依旧如此 → 解决:我脑慢的最后才想到是空格影响的,呵呵呵.
- 两个input之间有空隙,处理方法
修改css,给前边一个input添加一个左浮动. <input id="day" type="button" value="日" ...
- python123期末四题编程题 -无空隙回声输出-文件关键行数-字典翻转输出-《沉默的羔羊》之最多单词
1. 无空隙回声输出 描述 获得用户输入,去掉其中全部空格,将其他字符按收入顺序打印输出. ...
- html之给文本框设置宽度和高度/input的无边框效果
<input name="" type="text" style="width:200px; height:20px;" /> ...
- Android开发消除横向排列的多个Button之间的空隙
一.问题重述 摘要里描述的可能不太清楚,问题如下图: 如何消除Button1和Button2之间的空隙,以及Button与左右边界之间的空隙? 二.问题根源 这里出现的空隙其实是Button的背景图片 ...
- 解决div和img之间的空隙
div盒子和img之间有空隙之前也遇到过几次这问题,今天又遇到了特地来总结下. 先上代码和效果图: <!doctype html><html lang="en"& ...
- 关于行内元素之间有空隙的问题,例如span与input之间
问题如图: 想要的是下面的效果,而却出现上面的效果,解决方法如下: 对于行元素span或者input来说 很多人会用inline-block来显示他们,但是往往发现 中间会留一段小空隙 , 其实这个 ...
- 怎样清除td和input之间空隙
<style> input {background:red;border:none;height:30px;margin:0px} td {background-color:blue;pa ...
随机推荐
- OpenStack Havana 部署在Ubuntu 12.04 Server 【OVS+GRE】——序
OpenStack Havana 部署在Ubuntu 12.04 Server [OVS+GRE](一)——控制节点的安装 OpenStack Havana 部署在Ubuntu 12.04 Serve ...
- Unity3D开发类似保龄球游戏
先学习一些基本的脚本实现: 1.动态创建物体.默认位置是(0,0)位置 GameObject goNew = GameObject.CreatePrimitive(PrimitiveType.Cube ...
- C#多线程(下) 分类: C# 线程 2015-03-09 10:41 153人阅读 评论(0) 收藏
四.多线程的自动管理(线程池) 在多线程的程序中,经常会出现两种情况: 一种情况: 应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应 这一般使用ThreadPool(线 ...
- Oracle 同步表权限分配(同义词)
新建了同义词之后还要 分配权限
- (二)windows下安装PHPCMS V9
一.准备工作 搭建环境 :参考:Windows下搭建PHP开发环境及相关注意事项 PHPCMS V9 :下载适合自己 PHPCMS V9 版本到本地或服务器,下载地址:http://www.phpcm ...
- PPT 学习总结
PPT高效制作流程1.把word导入PPT2.在PPT里实现随机抽奖3.逻辑的调整:给PPT增加小节,来增强PPT的逻辑性4.设计PPT的母板,并可保存为自己的母板供以后使用 数据收集中国宏观经济统计 ...
- Delphi Memo的记事本功能
Delphi Memo的记事本功能 下载地址 : http://download.csdn.net/detail/teststudio/6412883 这个代码实现了Windows ...
- Android 手动显示和隐藏软键盘
1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Contex ...
- 支付宝手机网站支付流程(Node实现)
前言 公司M站要接入支付宝,借机研究了一下支付宝的支付流程.毕竟,只有公司才能拿到支付接口权限. 主要参考文档: https://doc.open.alipay.com/doc2/detail?tre ...
- xp系统
产品密钥 MRX3F-47B9T-2487J-KWKMF-RPWBY(亲测可用)