关于横向导航栏中ul li有关问题，求解
关于横向导航栏中ul li问题，求解
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>
红色部分为什么要做这个处理？溢出的部分是什么？
------解决方案--------------------
你给ul加个background-color，然后对比一下去掉overflow后和不去掉overflow，这两种的区别就可以看出来了
其实是在清理浮动。
可以搜索浮动清理，有很多这方面的文章的。
<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>
红色部分为什么要做这个处理？溢出的部分是什么？
------解决方案--------------------
你给ul加个background-color，然后对比一下去掉overflow后和不去掉overflow，这两种的区别就可以看出来了
其实是在清理浮动。
可以搜索浮动清理，有很多这方面的文章的。