Maison > Article > interface Web > ul中li的问题_html/css_WEB-ITnose
ul中li的问题_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:25:051199parcourir
<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，所以会覆盖父层的边框
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：页面内容的位置变了_html/css_WEB-ITnoseArticle suivant：层不确定宽度，怎么让他在父层中居中呢？_html/css_WEB-ITnose