Home > Article > Web Front-end > Problem with li in ul_html/css_WEB-ITnose
Problem with li in ul_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:051217browse
<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> Why does the border-bottom of ul be overwritten when the height of ul li a.cur{height:33px;} is set to be greater than or equal to 33px? I don’t understand.
Reply to the discussion (solution)
The li you set is floating, and its ul and ul’s parent element div are just elements in the ordinary flow. . Floated elements appear above normal elements.
And the height of the div you set is 33px, which is greater than the height of the div.
So I covered it
You add overflow: hidden on the div, which can not only clean up the floating elements, but also hide the excess part when the floating element is larger than the div.
LS’s correct answer
In fact, LZ can figure it out by thinking about it with nested thinking
Your li is inside a div, and the li will definitely cover the div below, overflow: hidden; can display
Set overflow (css) overflow:hidden;
The height of your div is only 33px, and when you set a to 33, you add the top border of a, so a The height is 34, which exceeds the height of the parent layer div. In addition, overflow:hidden is not set, so it will cover the parent layer's border