消除input,button之间的间距
代码:

效果:

问题:
input,button标签之间出现了间距,这并不是我们所期望的。
解决方法:
1.在父级元素上设置属性:font-size:0px;
将input父级字体(font-size)设为0px,可以消除间隔,但是得重新设置内联元素(input)的字体大小;

2.去掉input,button标签之间的空格

3.设置input为块元素,并且给一个左浮动

效果:

原因:
input是内联块状元素(inline-block);内联元素是当做字体来处理的,字体之间是有间隔的,所以内联元素之间也是有间隔的。
消除input,button之间的间距的更多相关文章
- 两个button之间的间距如何去掉
在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉
- button标签和input button
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- HTML <input> <button> <submit>
定义和用法 value 属性规定与按钮关联的初始值.请始终为按钮规定 type 属性,如果不填默认值是 "submit".submit其实就是一个特殊的button. <bu ...
- HTML中button和input button的区别
button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...
- HTML 去调table表单里面td之间的间距
首先为大家展示一下最原始的代码和效果.直接在table中用td划分的表格会默认隐藏边框. 接下来我们用css来增加样式,为table增加边框. table { border: 1px solid # ...
- 如何消除inline-block元素之间的间隙?
一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...
- [Android Pro] PullToRefreshListView怎么设置各个item之间的间距
reference to : http://blog.csdn.net/qq_25943493/article/details/50923895 要设置第三方的上拉下载listView的item之间 ...
- $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别
$POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
随机推荐
- spark中数据的读取与保存
1.文本文件 (1)读取文本文件 JavaRDD<String> input =sc.textFile(dir) (2)保存文本文件 result.saveAsTextFile(dir)) ...
- Angular - - ngIf、ngSwitch、ngHide/ngShow
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ...
- Selenium2(java)定位页面元素 二
辅助工具: chrome浏览器,F12打开控制台; Firefox浏览器,F12打开控制台; 或者选中要定位的元素右键 安装firefox扩展firebug和firepath; 安装之后F12可调用f ...
- Mac 电脑系统的重装
首先来说一下我为什么会想到重装Mac的系统呢??? 其实呢 很简单的一个理由,在我写上一个项目的时候,在功能code编写完成后,在模拟器上运行是完全没有问题的,但是在真机上就不行,大家也都知道,在X ...
- MapReduce深度分析(二)
MapReduce深度分析(二) 五.JobTracker分析 JobTracker是hadoop的重要的后台守护进程之一,主要的功能是管理任务调度.管理TaskTracker.监控作业执行.运行作业 ...
- U盘安装系统
http://www.ushendu.com/usdpzxt/1566.html http://www.ushendu.com/plus/view.php?aid=1571 http://www.ud ...
- java 字符串大小比较
//java 字符串大小比较 String a="b123"; String b="b124"; String d="b122"; Stri ...
- ListView 的三种数据绑定方式
ListView 的三种数据绑定方式 1.最原始的绑定方式: public ObservableCollection<object> ObservableObj; public Mai ...
- MyBatis与Spring集成
beans.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...
- Asp.net mvc 知多少(三)
本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...