先看基本解释: display:inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 按这个理解,就是能够横向排列的盒子。或者说是浮动的标准流。 这个属性有点不大好用,几乎所有的浏览器都支持的不太好。
其实使用 inline-block同样也可以实现上述的效果会更简单。 只要设置display 属性的值为inline-block就可以实现相同效果,且元素不会脱离文本流。 .box{width:80px;height:80px;border:2pxsolid peru;display: inline-block;margin:10px8px; } AI代码助手复制代码 效果图: 达到了和float(浮动)一样的效果,还不用为...
<!-- 样式代码 --> #elementsInline { width: 300px; /* 设置宽度以内容超出时出现滚动条 */ overflow: auto; white-space: nowrap; /* 使内部元素在一行显示 */ } #elementsInline span { display: inline-block; width: 100px; white-space: normal; /* 使文字可以正常换行 */ } <!-- 内容...
迫切需要的方法:inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。 内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然,内容区域会被推到顶端...
display:inline-block怎么用,你知道吗? display:inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内2尾页/qianduanjishuziliao/CSS3heHTML5zhuanti/2011-05-16/69_2.html
inline-block表示的是行内块状元素,比如:img、input在默认情况下即为行内块状元素,即:默认情况下,display属性的值为inline-block。 inline-block的特点:既能够设置宽高,又不独自占据一行。 因为inline-block元素的这个特点,它可以在css布局中起到很大的作用。