问题如图:

想要的是下面的效果,而却出现上面的效果,解决方法如下:

对于行元素span或者input来说 很多人会用inline-block来显示他们,但是往往发现  中间会留一段小空隙 ,

其实这个问题是由于换行引起的

<input>

<span>

解决一:

我们通常都是一个标签写一行,如果我们把上一行标签的尾巴移到下一行  自然可解决这个问题,如下

<input

><span>

解决二:

设置float:left来解决。

关于行内元素之间有空隙的问题,例如span与input之间的更多相关文章

  1. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

  2. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  3. HTML中的行内元素和框元素详解

    定义 传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统. 其实框元素是指宏观上的框元素,它包括3种类型:1.本身就是块级元素 2.dispaly被设置为类block 3 ...

  4. CSS HACK tab制表符导致行内元素之间的空隙如何解决

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...

  5. 【转】行内元素和inline-block产生的水平空隙bug

    重构工程师们在设计代码时,有喜欢手动删除行内元素之间产生的额外空隙,并通过设置margin或padding来获取想要间距吗?如代码: <div class=“”><span clas ...

  6. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  7. 清除行内元素之间的HTML空白

    原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...

  8. span i s等行内元素标签之间出现奇怪空格符号

    上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框 <p> <span><i>收货人:</i>{remar ...

  9. 行内元素和块级元素的具体区别是什么?inline-block是什么?(面试题目)

    一,行内元素与块级元素的区别: 1.行内元素与块级元素直观上的区别二.行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列. 块级元素各占据一行 ...

  10. 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

随机推荐

  1. python 全局解释锁GIL

    Python的全局解释器锁GIL用于保护python解释器,使得任意时刻,只有一个线程在解释器中运行.从而保证线程安全 在多线程环境中,Python 虚拟机按以下方式执行: 1. 设置GIL2. 切换 ...

  2. DP 贪心【p2134】百日旅行

    Background 重要的不是去哪里,而是和你在一起.--小红 对小明和小红来说,2014年7月29日是一个美好的日子.这一天是他们相识100天的纪念日. (小明:小红,感谢你2场大考时默默的支持, ...

  3. java应用高cpu占用

    一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环 排查故障如下: 1.根据top命令,发现PID为28555的Java进程占用CPU高达200%,出现故障 2.通过ps ...

  4. 2、Flask实战第2天:URL传参

    当我们访问网站/的时候,会执行hell_world函数,并把这个函数的返回值返回给浏览器,这样浏览器就显示hello world了 @app.route('/') def hello_world(): ...

  5. 详细的KVO总结,包括基本改变,使用案例,注意点.看我就够了!

    概述 KVO全称Key-Value-Observing,也叫键值监听,是一种观察者设计模式.提供了一种机制,当指定的对象的属性被修改后,对象就会收到一个通知.也就是说每次指定的被观察的对象的属性被修改 ...

  6. [BZOJ 4034] 树上操作

    Link: BZOJ 4034 传送门 Solution: 树剖模板题…… Code: #include <bits/stdc++.h> using namespace std; type ...

  7. yii2.0权限控制 ACF权限

    ACF是一种通过yii\filters\AccessControl类来实现的简单授权 有两种角色 ?:未经认证的游客用户 @:已认证的用户 ACF可同过对角色设置权限控制访问 1)记得引入yii\fi ...

  8. JS面向对象之闭包

    闭包 闭包的概念 闭包的含义就是闭合,简单来说就是一个具有封闭功能的结构 闭包就是具有封闭的对外不公开的,包裹结构或空间 在 js 中的闭包 在 js 中函数可以构成闭包 函数是一个代码结构的封闭结构 ...

  9. 使用spring-boot-admin对spring-boot服务进行监控

    原文:http://www.cnblogs.com/ityouknow/p/8440455.html 上一篇文章<springboot(十九):使用Spring Boot Actuator监控应 ...

  10. Python - 文本处理模块

    文本处理模块 本文地址: http://blog.csdn.net/caroline_wendy/article/details/27050431 Python的文本处理模块, 使用四种内置库. st ...