欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ul中li的有关问题

更新时间: 2014-01-05 00:53:25 责任编辑: Author_N1

 

ul中li的问题
<style type="text/css">
*{margin:0;padding:0}
div{width:600px;height:33px;margin:0 auto;border-left:1px solid #8DD8D4;border-bottom:1px solid #8DD8D4;}
ul{list-style-type:none;}
ul li{ float:left;}
ul li a{border-top:1px solid #8DD8D4;border-right:1px solid #8DD8D4; display:block;font-size:14px;padding:0 15px;text-decoration:none;text-align:center;background:none repeat scroll 0 0 #F5FCFB;height:32px; line-height:32px;}
ul li a.cur{height:33px;}
</style>
</head>

<body>
<div>
<ul>
    <li><a href="#" class="cur">当季热门</a></li>
    <li><a href="#">面朝大海</a></li>
    <li><a href="#">古镇时光</a></li>
    <li><a href="#">吃货血拼</a></li>
    <li><a href="#">户外撒野</a></li>
    <li><a href="#">情迷自驾</a></li>
</ul>
</div>
</body>
</html>

为什么ul li a.cur{height:33px;}的height设大于等于33px时会覆盖掉ul的border-bottom呢?搞不懂啊
--参考方法--
你设置的li是浮动的,它的ul,和ul的父元素div都只是普通流里的元素。浮动的元素会显示在普通元素的上方。

并且你设置的div的高度就是33px,高度大于div的高度了。

所以就把它覆盖掉了

你在div上面加个overflow:hidden,既可以清理浮动,又可以在浮动的元素大于div时,把超出的部分隐藏。

--参考方法--
LS正解
其实LZ用嵌套的思维想一下就知道了
你的li是在div里面的,li肯定会覆盖掉下面的div的,overflow:hidden;才能显示
--参考方法--
设置overflow (css)  overflow:hidden;
--参考方法--
你的div的高度只有33px,而你把a设为33时再加上a的top边框所以a的高度就为34了,超过了父层div的高度,再加上没有设置overflow:hidden,所以会覆盖父层的边框
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:25
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1060/
本文WWW.DOC100.NET DOC100.NET版权所有。