`

CSS中的inline-block属性

阅读更多
  inline-block是个很有用的属性,但在不同浏览器上表现有较大的差异。可以采用下面的技术来实现跨浏览器的支持。
.ib{
  display:inline-block;/* firefox等标准浏览器识别*/
  zoom:1;/* 触发ie6和ie7下的haslayout */
*display:inline;/* 只有ie6和ie7识别*/
}
  这样就可以得到一个可以定义宽度、高度的inline对象(不独占一行,其表现出来的特点跟按钮类似),这在有些场合是很有用的。如实现下图宽度可变位置居中的效果。




详细说明请参考:
http://www.nowamagic.net/csszone/css_InlineBlock.php
http://www.blueidea.com/tech/web/2009/6497.asp
  • 大小: 3.8 KB
分享到:
评论

相关推荐

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    在web设计中,"inline-block"是一种常用的CSS显示属性,它兼具内联元素和块级元素的特点。内联元素如,块级元素如,分别有其独特的布局特性。内联元素不会以新行开始,而是按照它们在文档中出现的顺序排列,而块级...

    CSS inline-block属性概述及其使用示例

    Inline-block是元素display属性的一个值。这个名字的由来是因为,可以简单的解释为inline+block ;display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。块级元素(block...

    CSS属性display:inline-block用法深入理解

    总的来说,`display:inline-block`是一种强大的CSS属性,能够帮助开发者创建更加灵活和复杂的网页布局。尽管存在浏览器兼容性挑战,但通过合理的CSS hack和技巧,我们可以克服这些问题,实现跨浏览器的`inline-block...

    inline-block 前世今生1

    display:inline-block 属性是CSS布局中的一个重要概念,它允许元素具有内联元素的特性(如排列在同一行内),同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用,尤其是用于创建响应...

    有关display:inline-block在FF出现空白的解决方案

    在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...

    css块状元素与内联元素以及inline-block

    CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素的区别在于它们的显示方式和布局特点。 一、块状...

    display:inline-block的实际应用

    `display:inline-block` 是 `display` 的一个值,它结合了块级元素(block-level element)和内联元素(inline element)的一些特性,为网页布局提供了更灵活的选择。在本篇文章中,我们将深入探讨 `display:inline-...

    css之display属性之inline-block布局实现详解

    在这个详解中,我们将深入讨论`display`属性中的`inline`、`block`以及`inline-block`值,以及它们在实际布局中的应用。 1. **`display: inline`** `inline`值使得元素作为行内元素显示,这意味着元素会与其他...

    css几种解决inline-block间隙的方案(整理)

    为了弥补inline和block的不足,又扩充了inline-block属性; inline-blcok可以将对象呈递为内联对象,而内容作为块对象呈递。 通俗点讲就是“可定宽高的堆在一起”显示 为什么会有间隙 inline-blcok块之间的不可见...

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...

    关于css display: inline block inline-block的区别分析

    但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢...

    深入理解css中vertical-align属性

    CSS中的vertical-align属性是用于控制行内元素(inline元素)或者表格单元格(table-cell元素)的垂直对齐方式。它主要影响元素在垂直方向上的位置,与水平方向上的布局(如margin和padding)是分开的。vertical-...

    CSS解决inline-block的错位问题

    在网页布局中,`inline-block` 是一种常用的元素显示方式,它结合了 `inline` 和 `block` 的特性,使得元素既可以像 `inline` 元素那样不换行显示,又能够设置宽度和高度等属性。然而,在实际开发过程中,开发者可能...

    详解CSS 去掉inline-block元素间隙的几种方法

    inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做一个块级元素来...

    CSS教程:inline-block在各浏览器的显示

    《CSS教程:深入理解inline-block在各浏览器的显示差异》 CSS中的display属性是一个非常重要的样式规则,它决定了元素如何在页面上呈现。在众多的display值中,`inline-block`是一个特别有用的值,它结合了`inline`...

    CSS中使用inline-block来进行居中的示例

    通过这种方式,你可以有效地利用`inline-block`属性在CSS中实现元素的居中对齐,同时注意到容器宽度的影响和如何处理潜在的空白间隙问题。这不仅适用于单个元素,也适用于一组需要居中的元素,使布局更加灵活和可...

Global site tag (gtag.js) - Google Analytics