為什么ul出現溢出,代碼貌似跟老師一樣
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>
<style?type="text/css">
*{padding:0;
?margin:0;
list-style:none;
font-size:12px????
}
#notice
{width:298px;
height:98px;
?margin:10px;
??border:1px?solid?#eee;
??overflow:hidden;
?}
.notice-tit{?height:27px;
?position:relative;
?background:#f7f7f7};
?.notice-tit?ul{position:absolute;
?width:301px;
left:-1px
?}
?
?.notice-tit?li{?float:left;
?width:59.6px;
?height:26px;
?line-height:26px;
?text-align:center;
?
??padding:0?1px;
???overflow:hidden;
?border-bottom:1px?solid?#eee;
?}
?
??.notice-tit?li?a:link,.notice-tit?li?a:visited{text-decoration:none;color:#000;}
??.notice-tit?li?a:hover{color:#F00}
?
??.notice-tit?li.select{background:#fff;
??border-bottom-color:#FFF;
??border-left:1px?solid?#eee;
????border-right:1px?solid?#eee;
????font-weight:bolder;
??}
</style>
</head>
<body>
<div?id="notice">
<div?class="notice-tit">
<ul>
<li><a?href="#">?公告</a></li>
<li><a?href="#">?規則</a></li>
<li><a?href="#">?論壇</a></li>
<li><a?href="#">?安全</a></li>
<li?class="select"><a?href="#">?工藝</a></li>
</ul>
</div>
</div>
</body>
</html>
跟老師寫的代碼一樣 顯示效果卻不一樣
2016-04-23
2016-01-03
?.notice-tit?li{?float:left; ?width:59.6px; ?height:26px; ?line-height:26px; ?text-align:center; ?padding:0?1px;//同學,注意這行 ?overflow:hidden; ?border-bottom:1px?solid?#eee; ?}每個li內邊距都多了1px,造成
li的寬度變為61.6px,5個li就變成了308px;超過了div容器的寬度,就溢出了,所以只需去掉那行代碼即可!同學!