问题如图:

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

对于行元素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. HDU 1391 number steps(找规律,数学)

    Starting from point (0,0) on a plane, we have written all non-negative integers 0, 1, 2,... as shown ...

  2. 洛谷——P1754 球迷购票问题

    题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的钱币,另有N个人手持面值1 ...

  3. 显示(explicit )与隐式(implicit)转换操作符

    class Program { static void Main(string[] args) { /* * 不管是显示还是隐式转换,一种类型都只能出现一次 */ Console.WriteLine( ...

  4. 【set】bzoj2761 [JLOI2011]不重复数字

    set去重. #include<cstdio> #include<set> using namespace std; set<int>S; ],b[],en; in ...

  5. python中json与dict之间转换

    Python之dict(或对象)与json之间的互相转化 在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import js ...

  6. 记一次深刻的教训-----将mat数据转化为SequenceFile

    深刻的体会就是,“java.lang.NullPointer.Exception”就是空指针异常可能是由于数组部分元素未被初始化引起的. 1)使用jmatio将mat数据转化为SequenceFile ...

  7. React Native之iOS App打包

    iOS打包步骤(一.二.三可不按照顺序) 步骤一: 选择iOS Device(以下两者选其中一个即可) 选择 Generic iOS Device (个人建议使用这个) 选择Generic iOS D ...

  8. 实现tomcat与IIS共用80端口

    一.80端口被system占用的问题 目前生产环境的需要两种方式网站发布: [1].使用IIS发布.net开发的网站: [2].使用tomcat发布java开发的网站: 启动tomcat的时候发现无法 ...

  9. java.io.IOException Too many open files 解决

    网上很多关于解决这个问题的博客,没有提到需要查看JAVA进程的limits参数设置 命令 : cat /proc/进程PID/limits   有时就会发现该进程的 open files还是1024默 ...

  10. 【java】java中直接根据Date 获取明天的时间

    展示代码: @Test public void dateTest(){ Date now = new Date(); System.out.println(now); // java.util.Dat ...