如何让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 ...
随机推荐
- 简单tableView的使用
UITableView是一个用于显示列表的视图,可以作为子视图镶嵌在主视图上,可以滑动,选取各种参数 定义: @interface ViewController : UIViewController& ...
- ssh互信自动化脚本(待更新)
1.建立一个ip,端口,用户,密码列表 [root@localhost shell-key]# cat arg_list.txt 172.16.56.215 172.16.56.215 172.16. ...
- redis ins 调试
Redis简介: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工 ...
- 网络子系统41_inet_peer平衡二叉树的删除
//1.p存在左孩子,则使用p的左孩子的最右孩子替换p,然后重平衡树 //2.p不存在左孩子,则使用p的右孩子替换p,然后重平衡树 1.1 static void unlink_from_pool(s ...
- JAVA 线程状态以及synchronized,wait,sleep,yield,notify,notifyAll
java线程存在以下几种状态: 1: 创建状态(New):线程被new出来,还未调用start 2: 就绪状态(Runnable):又称为可执行状态,调用线程的start方法后,线程处于就绪状态,,线 ...
- jQuery自定义多选下拉框
项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...
- MapObject shape数据操作
利用MO 的GeoDataset .DataConnection Recordset 进行数据操作 在MO中.使用GeoDataset对象和DataConnection 对象来连接和读取地理数据. ...
- 《大话操作系统——做坚实的project实践派》(6)
继续写硬件体系.这个不写完.不会写操作系统内核.由于根基不正,则难于达到上层境地.
- Groovy新手教程
Groovy新手教程 kmyhy@126.com 2009-5-13 一.groovy是什么 简单地说,Groovy 是下一代的java语言,跟java一样,它也执行在 JVM 中. 作为跑在JVM ...
- iOS开发--通过MultipeerConnectivity完成蓝牙通讯
iOS开发–通过MultipeerConnectivity完成蓝牙通讯 iOS蓝牙通讯的三种方式: GameKit.framework:iOS7之前的蓝牙通讯框架,从iOS7开始过期,但是目前已经被淘 ...