為什么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
每個li內邊距都多了1px,造成
li的寬度變為61.6px,5個li就變成了308px;超過了div容器的寬度,就溢出了,所以只需去掉那行代碼即可!同學!