网站地图    收藏   

主页 > 专题教程 > css >

list-style-position

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS list-style-position 属性用于指定标记符号或标记图像相对于列表项的位置。...

CSS list-style-position 属性用于指定标记符号或标记图像相对于列表项的位置。

通过list-style-position属性可以将列表标记符号放置在列表内容的外面,或放置在列表内容的里面。如下图所示:

list-style-position属性效果示意图

list-style-position属性可以应用在列表项或通过: list-item设置为列表的元素上。属性值outside会将标记放在离列表项边框边界一定距离处,这距离在CSS 中未定义。属性值inside会将标记插入在列表项内容最前面,行为类似行内元素一样。

官方语法
list-style-position: inside | outside | inherit
                            

参数:

  • outside:列表标记默认的位置。标记放在离列表项边框边界一定距离处。
  • inside:标记插入在列表项内容最前面。它在任何内容元素和:before伪元素之前。
  • inherit:继承父元素的标记位置值。
应用范围

list-style-position属性可以应用在列表元素或display: list-item的元素上。

示例代码
list-style-position: inside;
list-style-position: outside;

list-style-position: inherit;                              
                            

使用图像标记的示例代码:

ul {
    list-style-image: url(images/arrow.png);
    list-style-position: inside;
}                              
                            
在线演示

下面的例子演示了list-style-position属性的两种取值的效果:

list-style-position: inside;

  • 列表项一
  • 列表项二
  • 列表项三

list-style-position: outside;

  • 列表项一
  • 列表项二
  • 列表项三
浏览器支持

所有的现代浏览器都支持list-style-position属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论