HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档

有些HTML元素自然地带有display:block;样式属性,比如
    <div>
    <h1>...<h6>
    <p>
    <ul>,<ol>,<dl>
    <li>,<dt>,<dd>
    <table>
    <pre>
等元素,其显示为block样式,会将一行中其可用的空间给跨越占据,容不下另一个元素与其同行。

有些HTML元素则是自然带有display:inline;样式属性,这也是元素默认的样式,比如
    <span>
    <a>
    <strong>
    <em>
    <img>
    <br>
等元素,其不会打断文档排布流,会在一行中一个挨一个地排列。

当想要做一个水平的列表时,一种方式是使用float来实现,但得容忍其缺点;另一种方式是使用display:inline-block;来实现。现在转入正题了。

用float方式会带来的麻烦:
使用float方式需要注意的是,要有一个元素来包裹float元素,同时避免接下来的元素紧紧地靠近它。另外一个麻烦是,当有一个多行水平列表,但是列表里的内容有不同的高度时,就会排的非常痛苦。

用display:inline-block;方式:
display:inline-block;方式样式化列表时,既可使得列表元素能按行挨个排列,同时元素还能保持其块属性,比如高和宽、上下边距等。但是对有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

用display:inline-block;的浏览器兼容:
CSS中使用display:inline-block;来样式化,在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE,比如IE 7,就要做一些改变才能适应。
    /* For IE 7 */
    zoom: 1;
    *display: inline;
通常,做浏览器兼容适应的CSS样式化,最好是分开独立的样式文件,然后通过条件注释将其引入。

用display:inline-block;的空白符引起的问题:
因为元素之间是行内inline修饰排列的,因此HTML中的空格符也会影响到这个修饰。也就是说,当我们把元素的大小和顺序排列好后,如果在<li>元素之间有空格符,这个空格符将会产生4px的边距。

综述,用display:inline-block;来实现水平列表比用float方式更容易控制,需要注意的是前者会由空格符带来边距影响。

补充两点: 
1、inline-block默认是底部对齐的,要让两个元素顶部对齐,需要加上一句:veritcal-align:top; 
2、inline-block 的宽度可以自行设置的,而inline的自行设置宽度是无效的。

display:inline-block之用法的更多相关文章

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

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

  2. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  3. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  4. display:inline、block、inline-block的区别

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

  5. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  6. display:block、display:inline与displayinline:block的概念和区别

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

  7. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  8. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  9. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  10. HTML5 display:inline、block、inline-block的区别--备用

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

随机推荐

  1. JavaScript DOM编程艺术学习笔记-第二章JavaScript语法

    一.JavaScript示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 【第一周】PSP

    日期 C类别 C内容 S开始时间 E结束时间 I间隔(单位:分钟) T净时间(单位:分钟) 9月2日 编程 词频统计 7:35 9:35 10 110 9月3日 读书 构建之法 8:00 9:00 5 ...

  3. LR之Java Vuser II

    最近项目待压测的服务端协议使用的是java的Netty框架开发,而传输的业务数据使用了google protobuf进行序列化,然后通过tcp数据流与客户端通讯.这一次的压测脚本决定使用LR的java ...

  4. ZOJ2290_Game

    题目意思是这样的,给定一个数N,第一个可以减去任意一个数(不能为N本身),然后接下来轮流减去一个数字,下一个人减去的数字必须大于0,且不大于2倍上一次被减去的数字. 把N减为0的人获胜. 看完题目后不 ...

  5. bzoj3961[WF2011]Chips Challenge

    题意 给出一个n*n的网格,有些格子必须染成黑色,有些格子必须染成白色,其他格子可以染成黑色或者白色.要求最后第i行的黑格子数目等于第i列的黑格子数目,且某一行/列的格子数目不能超过格子总数的A/B. ...

  6. Period UVALive - 3026(next数组)

    题意: 给出一个长度不超过1000000的字符串S, 对于该字符串的所有前缀求其周期, 如果周期K >= 2输出起始位置是第几个字符和其周期K 解析: 先求next数组 对于每一个位置如果i % ...

  7. 【刷题】BZOJ 3365 [Usaco2004 Feb]Distance Statistics 路程统计

    Description 在得知了自己农场的完整地图后(地图形式如前三题所述),约翰又有了新的问题.他提供 一个整数K(1≤K≤109),希望你输出有多少对农场之间的距离是不超过K的. Input 第1 ...

  8. BZOJ1089 [SCOI2003]严格n元树 【dp + 高精】

    Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...

  9. JAVA本地TXT文件解决中文乱码问题

    import java.io.*; public class ReadFile { public static void main(String[] args) { try { File file = ...

  10. jQuery 前端实现手机验证码

    html <input id="phone" type="text" name="phone"> <input id=&q ...