首先list-style-position有inside和outside、、。
另外发现：设置inline-block时 那个圆点消失了。。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul.inside { list-style-position: inside } ul.outside { list-style-position: outside } .inline-block li{display: inline-block;} </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> <p>该列表的样式是inline-block list-style消失了：</p> <ul class="inline-block"> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> </ul> </body> </html>
w3cschool关于list-style-position时的另外发现,布布扣,bubuko.com
w3cschool关于list-style-position时的另外发现
原文：http://www.cnblogs.com/tom-chang/p/3653249.html