Listenstilposition in CSS: der Unterschied zwischen innen und außen-CSS-Tutorial-php.cn

Listenstilposition in CSS: der Unterschied zwischen innen und außen

黄舟

Freigeben： 2017-06-29 10:59:20

Original

4719 Leute haben es durchsucht

Was ist der Unterschied zwischen list-style-position innerhalb und außerhalb der CSS-Liste?

<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>

Nach dem Login kopieren

Codeeffekt:

Listenstilposition in CSS: der Unterschied zwischen innen und außen

list-style-position inside bedeutet, dass sich die Zahl oder der Rasterstil innerhalb des Li befindet und die Breite des Li einnimmt, während sich „outside“ außerhalb des Li befindet und nicht die Breite einnimmt des li.

Wie stelle ich die Breite von

ein?

Ein einzelnes Li kann direkt so geschrieben werden:

< ;/ li>
Wenn es mehrere li gibt, wie zum Beispiel:

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

Nach dem Login kopieren

, können Sie eine Klasse in

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

Nach dem Login kopieren

zwischen dem

Das obige ist der detaillierte Inhalt vonListenstilposition in CSS: der Unterschied zwischen innen und außen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!