昨天切页面时，进行布局时，想改变以下方法换换口味，所以就抛弃了float方法，采用了display:inline-block方法，没想到却随之而来的带来了一个想不通的问题，那就是空白。废话不多说，上代码。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

效果如上图所示，每个li之间都会有空格，这影响到我们对页面的布局。

一、造成的原因

inline-block水平呈现的元素之间，如果有换行或空格分隔，那么元素之间会有间距。

二、解决的方法

1、去除元素间的空白或者换行

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li><li>li</li><li>li</li><li>li</li>

    </ul>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>

        li</li><li>

        li</li><li>

        li</li><li>

        li</li>

    </ul>

</body>

</html>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li

        ><li>li</li

        ><li>li</li

        ><li>li</li>

    </ul>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li><!--

        --><li>li</li><!--

        --><li>li</li><!--

        --><li>li</li>

    </ul>

</body>

</html>

2、利用margin负外边距

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; margin-right:-8px;}//不过这个间距是根据字体的大小来调的，不具有普适性

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

3、因为空白字符也是字符，所以可以设置父元素的font-size：0，子元素重新定义font-size大小；但是这种方法在Safari中是无效的。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    .box{ font-size:;}

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; font-size:12px;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

4、使用letter-spacing

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    .box{ letter-spacing:-8px;}

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; letter-spacing:normal;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

//Opera浏览器下问题：最小间距1像素，然后，letter-spacing再小就还原了

5、使用word-spacing

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>inline-block的空白符</title>

<style type="text/css">

    .box{ word-spacing:-8px;}

    li{ width:50px; height:20px; background-color:#C90; display:inline-block; word-spacing:normal;}

</style>

</head>

<body>

    <ul class="box">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

</body>

</html>

影响布局的inline-block的空白符的问题的更多相关文章

  1. inline, block, and inline-block

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

  2. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  3. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  4. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

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

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

  6. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  7. 土旦：关于display:flex碰上white-space nowrap 影响布局的问题

    背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...

  8. div css 布局对seo 影响 布局原则

    一.代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处 ...

  9. overflow:hidden 影响布局的问题

    a 与 b 都是 inline-block且高与父元素 c 相同均为 30px,而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐,相 ...

随机推荐

  1. [Python学习笔记][第六章Python面向对象程序设计]

    1月29日学习内容 Python面向对象程序设计 类的定义与使用 类定义语法 使用class关键词 class Car: def infor(self): print("This is ca ...

  2. Java学习——内部类

    内部类的访问规则:1,内部类可以直接访问外部类中的成员,包括私有. 之所以可以直接访问外部类中的成员,是因为内部类中持有了 一个外部类的引用,格式 外部类名.this2,外部类要访问内部类,必须建立内 ...

  3. Cisco cmd 命令

    1.enable 开启全局配置模式:disable 禁用配置模式 2.config进入配置模式 3.line 设置进入用户模式密码:分为 line aux 0;line console 0;line ...

  4. ios禁用多按钮同时点下的效果

    只需要把那些不能同时点下的按钮或者视图设置一下即可. [view setExclusiveTouch:YES]; 避免view上多个button同时按下,则可设置每个button的setExclusi ...

  5. hibernate中.hbm.xml和注解方式自动生成数据表的简单实例(由新手小白编写，仅适用新手小白)

    绝逼新手小白,so 请大神指点! 如果真的错的太多,错的太离谱,错的误导了其他小伙伴,还望大神请勿喷,大神请担待,大神请高抬贵嘴......谢谢. 好了,正题 刚接触ssh,今天在搞使用.hbm.xm ...

  6. MySql移植到嵌入式Linux平台

    最近在做考勤机系统,硬件采用的cortex-A8,哈哈,其实是有点浪费的,2410就可以的.所以就要考虑到考勤数据的存储问题,本来是打算用sqlite数据库存储的,可是后来发现,这个数据库只是一个本地 ...

  7. 序列化layer创建的弹出表单并ajax提交

    /** *createTime:2015-09-13 *updateTime:2015-09-13 *author:刘俊 *phone:13469119119 *QQ:418873053 **/ va ...

  8. php二分查找

    // 递归版本 function bin_sch($arr,$low,$high,$val) { if($low<$high){ $mid = intval(($low+$high)/2); i ...

  9. WordPress SEO ☞ WordPress网站终极优化指南

    原文地址:http://www.eastdesign.net/wordpress-seo/ 最新消息,东方设计学院 WordPress SEO 系列视频教程正在持续更新中,目前为了不至于让视频传播过于 ...

  10. 【剑指offer】面试题22：栈的压入、弹出序列

    题目: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列 ...