要使多个块级元素并行显示,可使用float或者inline-block进行处理

使用inline-block会出现元素之间的间隙

<div class="demo">
<p>我是一个span</p>
<p>我是一个span</p>
<p>我是一个span</p>
<p>我是一个span</p>
</div> .demo span{
background:#ddd;
display:inline-block;
}

如图:

 

*间隙是由换行或者回车导致的,所以将标签代码都写同一行即可解决。不过这个方法不靠谱,因为space是由换行或回车所产生空白符所致,所以在其父元素设置font-size:0,如元素内有文字标签需重写font-size。

.demo{
font-size:0;
}
.demo span{
background:#ddd;
display:inline-block;
font-size:14px;
}

  

如图:

注释:如需对低版本兼容还得进一步处理

  

inline-block元素间隙处理的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  3. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  4. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  5. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  6. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  7. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  8. CSS 去掉inline-block元素间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  9. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  10. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

随机推荐

  1. [JavaWeb] Servlet Filter

    作用: Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servle ...

  2. centOS7.10 KDE桌面字体设置推荐

    安装完centOS7.10的KDE桌面后,第一次使用觉得字体太难看了,特别是终端,看着很难受,调整多次后觉得如下设置舒服很多,分享出来以供参考. 其中等宽字 这样整体看着就会舒服很多 ******** ...

  3. jdk1.8一键安装脚本(linux环境)

    1.下载jdk安装包和安装脚本 下载地址:https://pan.baidu.com/s/1bo6ADQ3 其中包括: jdk安装包:jdk-8u151-linux-x64.tar.gz jdk一键安 ...

  4. odoo开发笔记 -- wkhtmltox打印不显示中文 --ubuntu字体安装

    wkhtmltox 是一个开源的将网页内容转换成PDF的软件包,常嵌套在网页页面里边做打印功能. 以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放 ...

  5. FireFox浏览器-xpath快速定位插件:Xpath Checker

    FireFox浏览器-xpath快速定位插件:Xpath Checker 插件截图:

  6. 在matlab中实现PCA算法

    function [V,S,E]=princa(X) [m,n]=size(X); %计算矩阵的行m和列n %-------------第一步:标准化矩阵-----------------% mv=m ...

  7. 【Pthreads】Pipeline Model(Assembly Line)示例

    前言 Pthreads 有几种工作模型,例如 Boss/Workder Model.Pileline Model(Assembly Line).Background Task Model.Interf ...

  8. ASP.NET Core 1.0 中 EntityFramework 与 PostgreSQL 的使用

    https://docs.efproject.net/en/latest/providers/npgsql/index.html 前面在CentOS6.7环境下配置好了PostgreSQL, 就顺便试 ...

  9. spring boot 自动更新静态文件和后台代码 -- 热部署

    在spring boot使用的过程中, 发现我修改了静态文件, 前台刷新后, 没有任何变化, 必须重新启动, 才能看到, 这简直不能让人接受. 那有什么方法来解决这个问题呢. Baidu之后, 得到了 ...

  10. Redhat6.8下安装Oracle11gR2

    Step1.配置本地yum源,方便安装依赖包 df -h 补充: df命令查看 linux系统磁盘空间以及使用情况,-h代表方便阅读方式显示  :/dev/sr0为光驱设备名 mkdir cdrom ...