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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
  8. </style>
  9. </head>
  10. <body>
  11.     <ul class="box">
  12.         <li>li</li>
  13.         <li>li</li>
  14.         <li>li</li>
  15.         <li>li</li>
  16.     </ul>
  17. </body>
  18. </html>

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

一、造成的原因

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

二、解决的方法

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
  8. </style>
  9. </head>
  10. <body>
  11.     <ul class="box">
  12.         <li>li</li><li>li</li><li>li</li><li>li</li>
  13.     </ul>
  14. </body>
  15. </html>
  16.  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
  8. </style>
  9. </head>
  10. <body>
  11.     <ul class="box">
  12.         <li>
  13.         li</li><li>
  14.         li</li><li>
  15.         li</li><li>
  16.         li</li>
  17.     </ul>
  18. </body>
  19. </html>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
  8. </style>
  9. </head>
  10. <body>
  11.     <ul class="box">
  12.         <li>li</li
  13.         ><li>li</li
  14.         ><li>li</li
  15.         ><li>li</li>
  16.     </ul>
  17. </body>
  18. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
  8. </style>
  9. </head>
  10. <body>
  11.     <ul class="box">
  12.         <li>li</li><!--
  13.         --><li>li</li><!--
  14.         --><li>li</li><!--
  15.         --><li>li</li>
  16.     </ul>
  17. </body>
  18. </html>
  19.  

2、利用margin负外边距

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     li{ width:50px; height:20px; background-color:#C90; display:inline-block; margin-right:-8px;}//不过这个间距是根据字体的大小来调的，不具有普适性
  8. </style>
  9. </head>
  10. <body>
  11.     <ul class="box">
  12.         <li>li</li>
  13.         <li>li</li>
  14.         <li>li</li>
  15.         <li>li</li>
  16.     </ul>
  17. </body>
  18. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     .box{ font-size:;}
  8.     li{ width:50px; height:20px; background-color:#C90; display:inline-block; font-size:12px;}
  9. </style>
  10. </head>
  11. <body>
  12.     <ul class="box">
  13.         <li>li</li>
  14.         <li>li</li>
  15.         <li>li</li>
  16.         <li>li</li>
  17.     </ul>
  18. </body>
  19. </html>

4、使用letter-spacing

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     .box{ letter-spacing:-8px;}
  8.     li{ width:50px; height:20px; background-color:#C90; display:inline-block; letter-spacing:normal;}
  9. </style>
  10. </head>
  11. <body>
  12.     <ul class="box">
  13.         <li>li</li>
  14.         <li>li</li>
  15.         <li>li</li>
  16.         <li>li</li>
  17.     </ul>
  18. </body>
  19. </html>
  20.  
  21. //Opera浏览器下问题：最小间距1像素，然后，letter-spacing再小就还原了

5、使用word-spacing

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>inline-block的空白符</title>
  6. <style type="text/css">
  7.     .box{ word-spacing:-8px;}
  8.     li{ width:50px; height:20px; background-color:#C90; display:inline-block; word-spacing:normal;}
  9. </style>
  10. </head>
  11. <body>
  12.     <ul class="box">
  13.         <li>li</li>
  14.         <li>li</li>
  15.         <li>li</li>
  16.         <li>li</li>
  17.     </ul>
  18. </body>
  19. </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. SQL-SERVER2008登录错误233

    问题 : SQL Server2008在本地使用Windows身份验证登录或是使用SQL Server身份认证登录时报错:已成功与服务器建立连接,但是在登录过程中发生错取.(provider:共享内存 ...

  2. HTTP协议5之代理--转

    代理服务器 Web代理(proxy)服务器是网络的中间实体. 代理位于Web客户端和Web服务器之间,扮演“中间人”的角色. HTTP的代理服务器即是Web服务器又是Web客户端. Fiddler就是 ...

  3. easyui-window

    <div id="win" class="easyui-window" title="My Window" style="w ...

  4. js实现的对象数组根据对象的键值进行排序代码

    有时候会遇到做展示数组的排序,由大到小和由小到大的切换: var arr=[{id:1,webName:"蚂蚁部落"},{id:2,webName:"网易"}] ...

  5. 利用MetaWeblog API 自制博客发布小工具

    博客园提供了诸多数据接口, 利用这些接口可以很容易的实现博客的发布,修改,删除等 1.需要引用一个DLL:为CookComputing.XmlRpcV2 2.新建一个类,在其中是一些要实现的东西,如: ...

  6. java 加载图片的几种方式

    项目目录--src--testTable--image--active.gif | |_Task.class 方法1:通过项目目录访问. String a = System.getProperty(& ...

  7. setNeedsDisplay、layoutSubViews

    UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.而setNeedsDisplay会调 用自动调用drawRect方法,这样可以拿到UIGra ...

  8. Java IO4：字符流进阶及BufferedWriter、BufferedReader

    字符流和字节流的区别 拿一下上一篇文章的例子: 1 public static void main(String[] args) throws Exception 2 { 3 File file = ...

  9. c++设计模式之状态模式

    一. 状态模式 定义:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类. 实现方式1: workstate 状态抽象类 workstate1 状态实现类1 workstate2 ...

  10. display:table-cell的惊天作用，直接惊呆你！

    一 display:table-cell介绍 ... 二 用法 (1)高度不固定元素,垂直居中 ... (2)高度不固定列表元素,登高排列 ... (3)宽度不固定元素,平均分配 ...