文档章节

css inline-block后有换行符变成空白间隔bug

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/25 08:53
字数 183
阅读 8
收藏 0

以前都使用display:block很少使用display:inline-block,近期写样式有时候为了方便我也使用inline-block,不想竟然有个大问题,每个元素之间多了一个空白,而这个空白正是由于换行导致的:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

 

            span {

                margin: 0;

                padding: 0;

                display: inline-block;

                width: 50px;

                height: 20px;

                background: red;

            }

        </style>

    </head>

    <body>

        <span></span><span></span

        <span></span>

        <span></span>

    </body>

</html>

火狐:

IE:

Chrome:

没办法,要想把内联标签表现成块并且不换行只能按照老方法display:block后再float它。

本文转载自:http://www.qttc.net/page/5

共有 人打赏支持
大头儿子程序猿
粉丝 0
博文 20
码字总数 3454
作品 0
奉贤
程序员
inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; display:inline; zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是...

GIFCOOL
2012/09/04
0
0
CSS深入研究:display的恐怖故事解密

display作为一个最为恐怖的属性,没有之一,绝对不是欺骗3岁小孩,绝对是真实的。下面,就让我们看看这货的恐怖面貌。 display 值: none :隐藏对象。(注意,与visibility:hidden不同,这货...

程序员农民工
2012/10/21
0
0
拜拜了,浮动布局-基于display:inline-block的列表布局

一、一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了。写“CSS float浮动的深入研究、详解及拓展(一)”和“CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前,然而相隔差...

林文安
2012/06/01
0
0
前端——display:inline-block兼容ie6/7的写法

1、display:inline-block作用? 使用display:inline-block属性,可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父...

coolrp
2016/12/02
8
0
处理inline元素之间换行产生的空白

图片来自网络 inline, inline-block元素之间的换行符会造成类似空格的空白。不知道你遇到过没?比如以下代码: 这种问题对布局影响不大,容易被忽略。但是某些极端情况就会把这个问题放大。例...

乘着风
2016/01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(一)软件测试专题——之Linux常用命令篇01

本文永久更新地址:https://my.oschina.net/bysu/blog/1931063 【若要到岸,请摇船:开源中国 不最醉不龟归】 Linux的历史之类的很多书籍都习惯把它的今生来世,祖宗十八代都扒出来,美其名曰...

不最醉不龟归
25分钟前
6
0
蚂蚁金服Java开发三面

8月20号晚上8点进行了蚂蚁金服Java开发岗的第三面,下面开始: 自我介绍(要求从实践过程以及技术背景角度着重介绍) 实习经历,说说你在公司实习所做的事情,学到了什么 关于你们的交易平台...

edwardGe
32分钟前
7
0
TypeScript基础入门 - 函数 - this(三)

转载 TypeScript基础入门 - 函数 - this(三) 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.4 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
41分钟前
0
0
Spark core基础

Spark RDD的五大特性 RDD是由一系列的Partition组成的,如果Spark计算的数据是在HDFS上那么partition个数是与block数一致(大多数情况) RDD是有一系列的依赖关系,有利于Spark计算的容错 RDD中每...

张泽立
49分钟前
0
0
如何搭建Keepalived+Nginx+Tomcat高可用负载均衡架构

一.概述 初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最简单的部署方式,但是随着业务的不断扩大,系统的访问量逐渐的上升,单机部署的模式已...

Java大蜗牛
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部