 |
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：CSS入门到精通 > 列表项目标记位置 list-style-position属性 | |||||||||
| 阅读(22555525) 收藏 赞(5685) 分享 | |||||||||
| 上一篇： 列表项标记图像 list-style-image 属性 | 下一篇： 列表项标记的类型 list-style-type属性 | ||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。
属性定义及使用说明list-style-position属性指示如何相对于对象的内容绘制列表项标记。 示例<h2>Outside:</h2> <ul style="list-style-position:outside;width:25%;"> <li style="border:1px solid #000000">Coffee</li> <li style="border:1px solid #000000;border-top:0">Tea</li> <li style="border:1px solid #000000;border-top:0">Coca-cola</li> </ul> <h2>Inside:</h2> <ul style="list-style-position:inside;width:25%;"> <li style="border:1px solid #000000;">Coffee</li> <li style="border:1px solid #000000;border-top:0;">Tea</li> <li style="border:1px solid #000000;border-top:0;">Coca-cola</li> </ul> 效果图
属性值
示例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>列表项目标记位置 list-style-position属性</title> <!--定义内部样式--> <style> .inside{ /*规定列表中列表项目标记的位置*/ /*列表项目标记放置在文本以内，且环绕文本根据标记对齐。*/ list-style-position: inside; } .outside{ /*默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。*/ list-style-position: outside; } </style> </head> <body>
<h3>默认：该列表的 list-style-position 的值是 "outside"</h3> <ul> <li>html+html5入门到精通</li> <li>css+css3入门到精通</li> <li>javascript入门到精通</li> </ul>
<h3>该列表的 list-style-position 的值是 "inside"</h3> <ul> <li>html+html5入门到精通</li> <li>css+css3入门到精通</li> <li>javascript入门到精通</li> </ul>
</body> </html> 效果图
|
|||||||||
| 上一篇： 列表项标记图像 list-style-image 属性 | 下一篇： 列表项标记的类型 list-style-type属性 | ||||||||
