如何让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 ...
随机推荐
- 前谷歌首席 Java 架构师谈如何设优秀的 API
随着近来软件规模的日益庞大,API编程接口的设计变的越来越重要.良好的接口设计可以降低系统各部分之间的相互依赖,提高组成单元的内聚性,降低组成单元间的耦合度,从而提高系统的维护性和稳定性. Joshu ...
- hdoj 3635 Dragon Balls【并查集求节点转移次数+节点数+某点根节点】
Dragon Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- Maven学习总结(1-10)
Maven学习总结(1-10) 本文转自 孤傲苍狼 博客,讲解精炼易懂,适合入门,链接及截图如下 http://www.cnblogs.com/xdp-gacl/tag/Maven%E5%AD%A6% ...
- jersey构建rest服务返回json数据
1. eclipse 创建 dynamic web project 2. 将jersey相关jar包放到libs目录下 3. web.xml 增加 jersey 相关内容 <?xml ver ...
- Eclipse(PHP、JAVA)的快捷键大全
Eclipse是一个开放源代码的软件开发项目,专注于为高度集成的工具开发提 供一个全功能的.具有商业品质的工业平台.它主要由Eclipse项目.Eclipse工具项目和Eclipse技术项目三个项目组 ...
- VS2012的安装项目只能用InstallShield Limited Edition[附资源下载]
以前版本的Visual Stuido中安装项目都可以使用微软自家的Visual Studio Installer,但是到了VS2012这一切都变了,只能用InstallShield Limited E ...
- JDK6 下载地址
http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-41940 ...
- MySQL字符串函数
字符串大写和小写转换 MySQL 字符串大写和小写转化函数有两对: lower(), uppper() 和 lcase(), ucase() mysql> select lower('DDD') ...
- 兼容性记录-class属性
getAttribute获得class属性时,IE6,IE7的传參是className,IE7+和现代游览器都是class 全部游览器DOMElement均有的className属性,其在IE各版本号 ...
- Java_Activiti5_菜鸟也来学Activiti5工作流_之与Spring集成(三)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...