• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • list-style-position

    list-style-position 列表样式位置属性指定标记框在主块框中的位置。

    示例

    /* keyword values */
    list-style-position: inside;
    list-style-position: outside;
    
    /* global values */
    list-style-position: inherit;
    list-style-position: initial;
    list-style-position: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持list-style-position

    语法:

    list-style-positionoutside| inside

    取值

    • outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐
    • inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。

    说明:

    设置或检索作为对象的列表项标记如何根据文本排列。

    • 仅作用于具有<display>值等于list-item的对象(如li对象)。
    • 注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
    • 对应的脚本特性为listStylePosition
    默认值outside
    适用于所有display:list-item的元素
    继承性
    动画性
    计算值指定值

    例子

    //HTML
    <ul class="one"> list 1
      <li>list item 1-1</li>
      <li>list item 1-2</li>
      <li>list item 1-3</li>
      <li>list item 1-4</li>
    </ul>
    <ul class="two"> list 2
      <li>list item 2-1</li>
      <li>list item 2-2</li>
      <li>list item 2-3</li>
      <li>list item 2-4</li>
    </ul>
    <ul class="three"> list 3
      <li>list item 3-1</li>
      <li>list item 3-2</li>
      <li>list item 3-3</li>
      <li>list item 3-4</li>
    </ul>
    
    //CSS
    .one {
      list-style:square inside;
    }
    
    .two {
      list-style-position: outside;
      list-style-type: circle;
    }
    
    .three {
      list-style-image: url("starsolid.gif");
      list-style-position: inherit;
    }