说明:使元素成为内联元素,与其他内联元素同行显示,宽度由内容决定,不可直接设置宽高。 示例: .inline-element { display: inline; background-color: red; } 3.inline-block 说明:结合了块级和内联的特性,允许设置宽高,同时保持内联显示,相邻元素可同行显示。 示例: .inline-block-element { display: inline-bl...
display:inline; 内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。 display:block; 块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。 inline-block详解 inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。
像我们讲过的一样,转化为inline之后,除了图像之外 ,就不能设置宽高了! 这就是display:inline-block 的意义所在了 这个时候,我们加入display:inline-block;神奇的事情发生了! 我们明白了:inline-block是元素具备了两种(块级和内联)元素的功能,inline最重要的一点就是:元素能够在一行展示,而inline元素所缺失的设置宽...
block:设置元素显示为块级元素,独占一行,默认宽度为父元素的100%。 inline:设置元素显示为行内元素,和其他行内元素在一行显示,宽度由内容决定。 inline-block:设置元素显示为行内块级元素,和其他行内元素在一行显示,但可以设置宽高。 none:设置元素隐藏,不占据空间。 float属性:它用于定义元素在包含块中的浮动方向。
, , , , , 和是inline元素常见的例子,设置宽度和高度对inline元素没有影响,设置padding和margin在竖直方向上无效,在水平方向上有效。 三、display:inline-block 既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-alig...
宽度就是它的文字或图片的宽度,不可改变。 , , , , , 和是inline元素的例子。 (现代浏览器都支持 display:inline-block ,IE6、7 inline 元素也可以达到同样的效果,IE6、7 block 元素需要设置 display:inline; zoom:1; ) inline和block可以控制一个元素的行宽高等特性,需要...
定义label标签宽度需要设置display:inline-block; label { display:inline-block; width:90px; text-align:left; padding:1px; margin:1px; color:#000; }
div 元素默认display属性为block 为块状元素,无论div中文字字数,总以块状显示,即占满浏览器宽度。 1. 测试测试 1. 1. sss 1. 而span元素默认display属性为inline,只占据span中所占字数的宽度。 1. 测试测试 1. 1. 测试测试 1. inline-block 1. sfffs 2. 3. ...