list-style-position en CSS : la différence entre l'intérieur et l'extérieur-tutoriel CSS-php.cn

list-style-position en CSS : la différence entre l'intérieur et l'extérieur

黄舟

Libérer： 2017-06-29 10:59:20

original

4701 Les gens l'ont consulté

Quelle est la différence entre list-style-position à l'intérieur et à l'extérieur de la liste CSS ?

<a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLmh7bnju-rHIWPWbduHf40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnWb3PjT1rj6s" target="_blank" class="baidu-highlight">list-style</a>-position 属性设置在何处放置列表项标记。
外部 (outside) 标志会放在离列表项边框边界一定距离处。
内部 (inside) 标志处理像是插入在列表项内容最前面的行内元素一样。
 
<html>
<head>
<style type="text/css">
ul.inside 
{
<a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLmh7bnju-rHIWPWbduHf40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnWb3PjT1rj6s" target="_blank" class="baidu-highlight">list-style</a>-position: inside
}
ul.outside 
{
<a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLmh7bnju-rHIWPWbduHf40ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnWb3PjT1rj6s" target="_blank" class="baidu-highlight">list-style</a>-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>

Copier après la connexion

Effet de code :

list-style-position en CSS : la différence entre lintérieur et lextérieur

list-style-position inside signifie que le nombre ou le style de grille est à l'intérieur du li, et il occupe la largeur du li, tandis que l'extérieur est à l'extérieur du li, et il n'occupe pas la largeur du li.

Comment définir la largeur de

Un seul li peut être écrit directement comme ceci :

< ;/ li>
S'il y a plusieurs li tels que :

<ul>
<li>设置宽度1</li>
<li>设置宽度1</li>
<li>设置宽度1</li>
</ul>

Copier après la connexion

, vous pouvez ajouter une classe dans

<style>
.widthstyle li {width:100px;}
</style>

Copier après la connexion

entre le

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!