遇到的问题:
  使用<input>标签做了两个按钮, 按钮之间有个间距不知道怎么去掉. 如下图:

  

问题解决:
  <input>是内联块状元素(inline-block);

  内联元素是当做字体来处理的,字体之间是有间隔的,所以内联元素之间也是有间隔的;

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

修改后的代码:

修改后的样式:

参考内容:http://www.imooc.com/qadetail/66458

  

使用<input>标签做了两个按钮, 按钮之间间距如何去掉的更多相关文章

  1. 一个input标签搞定含内外描边及阴影的按钮~

    自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...

  2. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  3. [移动端WEB] 移动端input标签按钮为什么在苹果手机上还有一层白色?

    移动端input标签按钮为什么在苹果手机上还有一层白色? 解决办法:其实蛮简单的,就加一个属性就好了 input { outline:0px ; -webkit-appearance: none; } ...

  4. html 常用标签 a form input 标签 等等等

    前端HTML   HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk ...

  5. 如何用input标签上传多个图片并回显

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...

  6. 全面剖析 <input> 标签 ------ HTML\HTML5

    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...

  7. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  8. input 标签的监听事件总结

    最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...

  9. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

随机推荐

  1. api1

    http://www.android-doc.com/reference/android/app/Fragment.html

  2. O-C浮点数转化整数

    1.简单粗暴,直接转化 float f = 1.5; int a; a = (int)f; NSLog("a = %d",a); 输出结果是1.(int)是强制类型转化,丢弃浮点数 ...

  3. Recovery和Charger模式下屏幕旋转180度[转]

    如何让Recovery (系统固件升级),charger(关机充电动画)时屏幕旋转180度 解决方法: 1.在bootable\recovery\minui\Graphics.c 文件找到gr_fli ...

  4. Solr4.8.0源码分析(21)之SolrCloud的Recovery策略(二)

    Solr4.8.0源码分析(21)之SolrCloud的Recovery策略(二) 题记:  前文<Solr4.8.0源码分析(20)之SolrCloud的Recovery策略(一)>中提 ...

  5. PHP调试工具Xdebug安装配置教程

    说道PHP代码调试,对于有经验的PHPer,通过echo.print_r.var_dump函数,或PHP开发工具zend studio.editplus可解决大部分问题,但是对于PHP入门学习的童鞋来 ...

  6. BZOJ 1257 余数之和

    Description 给出正整数\(n\)和\(k\),计算\(j(n, k)=k\;mod\;1\;+\;k\;mod\;2\;+\;k\;mod\;3\;+\;-\;+\;k\;mod\;n\) ...

  7. 解决Ext.TextField的AllowBlank不能过滤空格代码

    Ext过滤空格 重写了组件... Ext.apply(Ext.form.TextField.prototype, { validator : function(text) { if (this.all ...

  8. Hibernate 的*.hbm.xml文件的填写技巧

    ================================================================================= 模板: <!-- ?属性,本类 ...

  9. Linux企业级开发技术(5)——libevent企业级开发之简介

    Libevent是一个用于编写高速可移植非阻塞IO应用的库,它的设计目标是: 可移植性:使用libevent编写的程序应该可以在libevent支持的所有平台上工作.即使没有好的方式进行非阻塞IO,l ...

  10. Linux企业级开发技术(1)——epoll企业级开发之简介

    Epoll是当前在 Linux 下开发大规模并发网络程序的热门人选, Epoll 在 Linux2.6 内核中正式引入.和 select 相似,是高效 I/O 多路复用技术. 其实在 Linux 下设 ...