老师请问一下，我这四个小li第一个跟最后一个为啥不靠边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header {
width: 1000px;
height: 100px;
/* background-color: black; */
margin: 0 auto;
}
header .logo {
width: 220px;
height: 100px;
float: left;
background-color: #bfa;
}
header .login {
width: 220px;
height: 30px;
background-color: red;
float: right;
}
header>nav {
margin-top: 10px;
width: 690px;
height: 60px;
background-color: blue;
float: right;
}
.content {
width: 1000px;
height: 400px;
margin: 10px auto;
/* background-color: black; */
}
.content>aside {
float: left;
width: 300px;
height: 400px;
background-color: pink;
}
.content>main {
width: 690px;
height: 400px;
float: right;
/* background-color: rgb(121, 12, 12); */
}
.content>main .banner {
width: 690px;
height: 300px;
background-color: rgb(119, 109, 109);
}
.content>main .pics {
width: 690px;
height: 85px;
margin-top: 10px;
background-color: rgb(143, 44, 44);
}
.content>main .pics>ul {
list-style: none;
}
.content>main .pics>ul li {
float: left;
width: 150px;
height: 85px;
background-color: rgb(212, 150, 150);
margin-right: 10px;
}
.content>main .pics>ul li:last-child {
margin-right: 0;
}
footer {
width: 1000px;
height: 100px;
background-color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<div class="logo"></div>
<!-- 右上 -->
<div class="login"></div>
<!-- 右下 -->
<nav></nav>
</header>
<!-- 内容部分 -->
<section class="content">
<!-- 左侧广告部分 -->
<aside></aside>
<!-- 右侧内容 -->
<main>
<div class="banner"></div>
<div class="pics">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</main>
</section>
<!-- 页角 -->
<footer></footer>
</body>
</html>
相关截图：
正在回答 回答被采纳积分+1
同学你好，是因为ul元素带有默认的margin和padding，导致与父盒子边缘产生距离，如图
建议：html中某些块级元素都会带有默认的margin和padding，所以在开发项目时，会在css代码的开头先将默认的margin和padding清除，再书写其他样式代码，如图
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星