设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

css display inline属性全掌握-实例讲解

时间:2015-02-23 13:42:28 来源:村姑网 作者:喜欢安静 阅读: 97 次
导读:关于css display block属性我们在上一篇文章中已经用实例进行了详细的说明,今天我们将要用实例来学习display的另外一个属性css display inline,下面我们一起来研究inline属性。 首先我们先说一下inline属性的作用。inline :默认。此元素会被显示为内联元...

    关于css display block属性我们在上一篇文章中已经用实例进行了详细的说明,今天我们将要用实例来学习display的另外一个属性“css display inline”,下面我们一起来研究inline属性。

    首先我们先说一下inline属性的作用。inline :默认。此元素会被显示为内联元素,元素前后没有换行符。在元素后面删除换行符,多个元素可以在一行内并列显示。根据他的作用的描述,我们可以知道,在css中,如果给一个元素设置了css display inline属性的话,那么该元素会成为内联元素,删除元素前后的换行后,就会在一行显示了。下面我们用一个实例来说明:

首先我们在html页面中写入一下代码:

<div>我是div元素</div>
<p>我是表示段落的P元素</p>
<UL>我是ul元素</UL>

此时我们用浏览器打开看一下效果,如图1:

 没加display inline属性时的效果-www.cunguer.com-村姑网

    你会发现这3个元素每个元素会占用一行,那么为什么会这样呢,原因是div、p、ul这3个元素默认的display属性为block,所以才会自动的换行,当然了,默认的属性为block的元素并不止这3个,如果你想要了解更多默认的display属性为block的元素,你可以查看这篇文章《css中display属性是什么及其各个值的作用和用法》,在这里不再加以说明。接下来我们给这3个元素的css属性都加上display:inline,再用浏览器打开,看一下会发生什么变化呢?css代码如下:

p{
display:inline;
}
div{
display:inline;
}
ul{
display:inline;
}

用浏览器打开后的效果如图2所示:

加上display:inline属性后的效果-www.cunguer.com-村姑网

    看到了没?此时的三个元素都在同一行显示了,好了,关于css display inline属性我们今天就说到这里吧,关于display的block属性,请查看《css display block属性的意思、作用和效果》一文,该文对block属性同样进行了实例演示。

(注:欢迎转载,转载请注明来源于“村姑网-www.cunguer.com”,谢谢~!)

《css display inline属性全掌握-实例讲解》地址:www.cunguer.com/article/14.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!