list-style-position in CSS: the difference between inside and outside

What is the difference between list-style-position inside and outside in

CSS list?

list-style-position 属性设置在何处放置列表项标记。
外部 (outside) 标志会放在离列表项边框边界一定距离处。
内部 (inside) 标志处理像是插入在列表项内容最前面的行内元素一样。
 





该列表的 list-style-position 的值是 "inside"：

Earl Grey Tea - 一种黑颜色的茶
Jasmine Tea - 一种神奇的“全功能”茶
Honeybush Tea - 一种令人愉快的果味茶

该列表的 list-style-position 的值是 "outside"：

Earl Grey Tea - 一种黑颜色的茶
Jasmine Tea - 一种神奇的“全功能”茶
Honeybush Tea - 一种令人愉快的果味茶

Code effect:

list-style-position inside means that the number or grid style is inside the li, and it occupies the width of the li, while outside is outside the li, and it does not occupy the width of the li.

How to set the width of

?

A single li can be written directly like this:

li>
If there are multiple li such as:

设置宽度1
设置宽度1
设置宽度1

, you can add a class in

:

Then in the page Add

between
to control the width of li. You can also add other styles. ###

The above is the detailed content of list-style-position in CSS: the difference between inside and outside. For more information, please follow other related articles on the PHP Chinese website!