<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css list-style-position</title> <style> /*参考:https://www.w3school.com.cn/cssref/pr_list-style-position.asp 知识点: 1.list-style-position 属性设置,在何处放置列表项标记。 经测试,inside 的列表项靠里,outside 的列表项靠外。 视觉效果差异,仅此而已。*/ ul.inside { list-style-position: inside } ul.outside { /*默认值。*/ list-style-position: outside } </style> </head> <body> <p>list-style-position "inside":</p> <ul class="inside"> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> </ul> <p>list-style-position "outside":</p> <ul class="outside"> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> </ul> </body> </html>
css list-style-position.html
最新推荐文章于 2023-05-27 09:50:31 发布