为什么ul出现溢出，代码貌似跟老师一样-慕课网

为什么ul出现溢出，代码貌似跟老师一样

来源：1-2 tab页面布局-标题布局

如醉如痴

2016-01-03 17:10

<!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>

跟老师写的代码一样显示效果却不一样

写回答关注

2回答

rookie2maven

2016-04-23 22:54:17
```
padding:0;或者 width:58px;
```
0 0
堂堂堂堂糖糖糖童鞋

2016-01-03 17:24:23
```
 .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容器的宽度，就溢出了，所以只需去掉那行代码即可！同学！
0 0

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65466 学习 · 578 问题

查看课程

相似问题

老师 ul的width为什么要是301

回答 1

为什么报错出现这个。

回答 1

为什么ul里的width设置为301px

回答 4

求助！！！！！我写的代码，不知道怎么搞的，就是不成功，会出现点击一下就出现一瞬间的现象，也不知道什么原因，各位大侠帮我看看，

回答 1

为什么运行不了，经常这样和别人的代码一模一样也运行不了

回答 4

打开慕课网App查看更多内容