老师，我想咨询一下，为什么这儿列表的点默认在div外边啊？

星辰很精彩 2022-09-26

源自：CSS入门 10-2 文章列表

收起

1回答

好帮手慕小小 2022-09-26 18:28:56

同学你好，可能是同学代码中使用了通配符选择器将元素内外边距设置为了0，建议将代码上传至问答区。若想显示在div内，则可以单独设置，例如：

1	`list-style-position:` `inside;`

参考代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
 
.box {
border: 1px solid #ccc;
margin-top: 30px;
margin-left: 30px;
}
 
a {
color: #000;
text-decoration: none;
}
 
li {
list-style-position: inside;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">喵星人的最爱</a></li>
<li><a href="#">我与哈士奇二三事</a></li>
<li><a href="#">哈士奇真的爱拆家吗？</a></li>
<li><a href="#">英短的价格区间</a></li>
<li><a href="#">如何训练边牧</a></li>
</ul>
</div>
</body>
</html>

注：为了问题的准确定位，建议同学上传截图的同时将代码也上传至问答区。

祝学习愉快~

收起回答

提问者星辰很精彩 #1

我问的是为什么默认就在外面啊

2022-09-26 18:54:22
好帮手慕小小回复提问者星辰很精彩 #2

同学你好，因为上述参考代码中使用了如下代码将元素自带的内边距，外边距设置为了0，故li的黑点显示在div的外侧。
1
2
3
4
* {
margin: 0;
padding: 0;
}
例如：
祝学习愉快~

2022-09-26 19:09:27
提问者星辰很精彩回复好帮手慕小小 #3

也就是说黑点从一开始就不属于div里面对吧？它一直都放在外面和li的每个标签对应嘛

2022-09-26 20:24:10