4-4案例应用
来源：4-6 案例应用
慕虎9595667
2017-07-14 16:34:05
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;font-family: "微软雅黑";}
.nav{
width: 200px;
background:#ececec;
border: 1px solid #ececec;
margin:0 auto;
}
.list1{
width:100%;
height:90px;
background: black;
color:white;
font-weight: bold;
font-size:20px;
text-align: center;
line-height:90px;
}
.list2{
width:100%;
border-bottom: 1px solid #d9dde1;
font-size:14px;
line-height: 1.5em;
margin:0px 15px;
padding:10px 5px 5px 5px;
}
span{color:#93999f;}
.special{border-bottom: none;}
</style>
</head>
<body>
<div class="nav">
<div class="list1">前端课程排列</div>
<div class="list2"><p>HTML+CSS基础课程</p><span>4098878人在学</span></div>
<div class="list2"><p>HTML+CSS基础课程</p><span>4098878人在学</span></div>
<div class="list2 special"><p>HTML+CSS基础课程</p><span>4098878人在学</span></div>
</div>
</div>
</body>
</html>
你好，代码这样写，设置了list2左右外边距15px后，下边框的线往右边跑出去了，是哪里出了问题呢？
1回答
-
樱桃小胖子
2017-07-14
盒子的宽度=border-left+padding-left+margin-left+width，因此当你给list2设置margin、padding值以后它的宽度超出了nav的宽度，解决办法是减小list2的宽度。希望可以帮到你！
0
