- 浏览: 38590 次
- 性别:
- 来自: 天津
最新评论
css属性之display:inline-block
- 博客分类:
- WEB
引用:
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有:Opera、Safari
延伸一个问题:IE下块元素如何实现display:inline-block的效果?
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:
div {display:inline; zoom:1;...}
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有:Opera、Safari
延伸一个问题:IE下块元素如何实现display:inline-block的效果?
有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:
div {display:inline; zoom:1;...}
发表评论
-
我的CSS框架-base.css
2015-04-13 10:19 558@charset "utf-8"; /*! ... -
HTML中自定义字体
2014-05-22 11:03 917@font-face { font-family:trebu ... -
兼容新处理要点
2013-09-16 13:59 589兼容性处理要点 1、DOCTYPE 影响 CSS 处理 ... -
dl dt dd
2012-12-28 11:03 696dl:definition list dt:definitio ... -
内联元素加上浮动就变成了块级元素
2012-11-20 10:19 859内联元素加上浮动就变成了块级元素 -
三像素文本漫溢
2012-11-20 10:14 759三像素文本慢移:如果无名线框(包含内联内容的框)邻近某个浮动, ... -
网页背景从上到下的渐变
2012-10-31 16:30 898<body leftmargin="0&quo ... -
加入收藏
2012-10-31 16:23 984<Script Language="Jav ... -
HTML文件HEAD内部标记浅析
2012-10-31 16:15 728今天,使用各种所见即 ... -
半透明图层
2012-10-31 16:11 649<style type="text/css&q ... -
表格边框为1像素自定义颜色
2012-10-31 15:03 1216table{ border:1px solid #94919 ... -
爱恨原则
2012-07-12 09:06 897【经验】在CSS中定义a:link、a:visited、 ... -
兼容所有浏览器的圆角
2012-07-06 13:39 703<!DOCTYPE HTML> <html& ... -
css行内文本超出指定宽度溢出的处理
2012-03-28 14:53 1430一般文字截断: .text-overflow{ ... -
识别IE6的代码
2012-03-13 14:40 652将要在IE6里显示的内容和样式写在<!--[if lte ... -
理解绝对定位和相对定位
2012-03-13 11:10 559概要:本文主要描述XHTML中相对定位和绝对定位各自的本质、 ... -
Javascript中最常用的55个经典技巧
2012-03-08 16:53 6651. oncontextmenu="window. ... -
按钮鼠标悬停时手势
2012-03-08 16:11 1046<button name="submit&qu ... -
点此打印代码
2012-03-07 15:32 681<!DOCTYPE html PUBLIC " ... -
CSS字体调用
2012-03-05 09:31 2077<!DOCTYPE html PUBLIC " ...
相关推荐
在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...
`display:inline-block` 是 `display` 的一个值,它结合了块级元素(block-level element)和内联元素(inline element)的一些特性,为网页布局提供了更灵活的选择。在本篇文章中,我们将深入探讨 `display:inline-...
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...
总的来说,`display:inline-block`是一种强大的CSS属性,能够帮助开发者创建更加灵活和复杂的网页布局。尽管存在浏览器兼容性挑战,但通过合理的CSS hack和技巧,我们可以克服这些问题,实现跨浏览器的`inline-block...
在网页布局设计中,`display:inline-block` 是一个非常实用的CSS属性,它允许元素以行内元素的方式显示,但同时保留着块级元素的特性,如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局,尤其是需要在有限的...
`display:inline-block` 是 CSS 中的一个重要属性,用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性,使得元素既能像内联元素一样在一行内排列,又能像块级元素一样拥有宽度、...
在Web开发中,`display:inline-block`是一种非常实用的CSS属性,它允许元素拥有块级元素的特性(如自定义宽度、高度),同时保持内联元素的排列方式,即允许元素在同一行显示。然而,IE6和IE7这两个较老的浏览器对`...
《CSS教程:深入理解inline-block在各浏览器的显示差异》 CSS中的display属性是一个非常重要的样式规则,它决定了元素如何在页面上呈现。在众多的display值中,`inline-block`是一个特别有用的值,它结合了`inline`...
`display` 属性是CSS中一个非常重要的属性,它决定了元素如何在页面上布局。`display`属性的主要功能是控制元素生成的框的类型,从而影响元素的布局方式。在这个详解中,我们将深入讨论`display`属性中的`inline`、`...
但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢...
在CSS布局中,`display: inline-block` 是一个常用的属性,它允许元素以行内元素的方式排列,同时具有块级元素的部分特性,如指定宽度和高度。然而,使用`display: inline-block` 时,元素之间往往会出现一些...
"使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念:`text-align`属性和`display`属性的`inline-block`值,它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...
display:inline-block 属性是CSS布局中的一个重要概念,它允许元素具有内联元素的特性(如排列在同一行内),同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用,尤其是用于创建响应...
`display:inline-block`是CSS布局中的一个重要属性,用于将元素表现得既像内联元素那样在一行内排列,又能像块级元素那样控制其内部内容的布局。这种特性使得`inline-block`在网页布局中非常实用,特别是在创建响应...