Rumah > Artikel > hujung hadapan web > CSS中list-style-position：inside与outside的区别
CSS中list-style-position：inside与outside的区别
- 黄舟asal
- 2017-06-29 10:59:204679semak imbas
CSS列表中list-style-position inside 和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) 标志会放在离列表项边框边界一定距离处。
内部 (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>代码效果：
list-style-position inside 是说数字或者方格样式在li的里面，他是占用li的宽度的，而outside则是在li的外面，他不占用li的宽度。
哪怎么设定25edfb22a4f469ecb59f1190150159c6的宽度呢?
单个li可以直接这样写：9ea91a6917813901ea601046b64c16f8bed06894275b65c1ab86501b08a632eb
如果是多个li如:
<ul> <li>设置宽度1</li> <li>设置宽度1</li> <li>设置宽度1</li> </ul>
则可以在ff6d136ddc5fdfeffaf53ff6ee95f185加一个class：21194673e494c641a4a6c154cd90a33a
然后在页面的93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1之间添加
<style>
.widthstyle li {width:100px;}
</style>这样就可以控制li的宽度了，你还可以加其他的样式。
Atas ialah kandungan terperinci CSS中list-style-position：inside与outside的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS中使用list-style-position:outside时列表图标不显示的问题解决Artikel seterusnya：css使用了list-style-position前面的标记单独占一行