代码:

效果:

问题:

input,button标签之间出现了间距,这并不是我们所期望的。

解决方法:

1.在父级元素上设置属性:font-size:0px;

将input父级字体(font-size)设为0px,可以消除间隔,但是得重新设置内联元素(input)的字体大小;

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

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

效果:

原因:

input是内联块状元素(inline-block);内联元素是当做字体来处理的,字体之间是有间隔的,所以内联元素之间也是有间隔的。

消除input,button之间的间距的更多相关文章

  1. 两个button之间的间距如何去掉

    在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉

  2. button标签和input button

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  3. HTML <input> <button> <submit>

    定义和用法 value 属性规定与按钮关联的初始值.请始终为按钮规定 type 属性,如果不填默认值是 "submit".submit其实就是一个特殊的button. <bu ...

  4. HTML中button和input button的区别

    button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...

  5. HTML 去调table表单里面td之间的间距

    首先为大家展示一下最原始的代码和效果.直接在table中用td划分的表格会默认隐藏边框.  接下来我们用css来增加样式,为table增加边框. table { border: 1px solid # ...

  6. 如何消除inline-block元素之间的间隙?

    一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...

  7. [Android Pro] PullToRefreshListView怎么设置各个item之间的间距

    reference to :  http://blog.csdn.net/qq_25943493/article/details/50923895 要设置第三方的上拉下载listView的item之间 ...

  8. $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    $POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...

  9. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

随机推荐

  1. Angular - - $location 和 $window

    $location $location服务解析浏览器地址中的url(基于window.location)并且使url在应用程序中可用.将地址栏中的网址的变化反映到$location服务和$locati ...

  2. 2.11. 创建托管对象(Core Data 应用程序实践指南)

    到现在为止,还没有创建过托管对象,回顾了一下,只是创建了托管对象模型,持久化存储区,持久化存储协调器,托管对象上下文. 那么,现在就来创建托管对象吧. 使用NSEntityDescription 的 ...

  3. BNU Online Judge-34776-What does the fox say?

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34776 题意: fox 的叫声 例如测试用例 输入 toot woof wa ow ow ...

  4. 响应HttpServletResponse

    可以使用HttpServletResponse来对浏览器进行响应,大部分情况下,会使用setContentType()设置响应类型,使用getWriter()取得PrintWriter对象,而后使用P ...

  5. JSP/Servlet(一)

    JSP/Servlet(一)   Web应用和web.xml文件: 一.构建Web应用: 1.在任意目录下创建一个文件夹. 2.在第1步所建的文件夹内建一个WEB-INF文件夹(注意大小写). 3.进 ...

  6. EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题

    EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题: 如果无法正确找到重复记录的row index,就需要进行注意添加的时候所进行的 操作:如果添加的时候就是添加的 ...

  7. java虚拟机启动参数整理

    java启动参数 共分为三类其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容:其二是非标准参数(-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都满足,且不 ...

  8. 如何用webbrowser获取ajax动态生成的网页的源码?

    1.步骤一:修改IE内核的版本(这个方法厉害了) public Form1() { InitializeComponent();int BrowserVer, RegVal; // get the i ...

  9. 第七届蓝桥杯javaB组真题解析-分小组(第四题)

    题目 /* 分小组 9名运动员参加比赛,需要分3组进行预赛. 有哪些分组的方案呢? 我们标记运动员为 A,B,C,... I 下面的程序列出了所有的分组方法. 该程序的正常输出为: ABC DEF G ...

  10. 数据结构(Java描述)之二叉树

    基础概念 二叉树(binary tree)是一棵树,其中每个结点都不能有多于两个儿子. 二叉排序树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于或等于它 ...