                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

为什么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-01-03

源自：Tab选项卡切换效果 1-2

关注问题我要回答

1763

操作

收起

2 回答

rookie2maven
2016-04-23

padding:0;或者 width:58px;

0 回复有任何疑惑可以回复我~

收起回答

堂堂堂堂糖糖糖童鞋
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容器的宽度，就溢出了，所以只需去掉那行代码即可！同学！