导航栏如何实现？
以水平导航为例，用块元素还是用内联元素呢？
理论上应该用内联元素，因为块元素会换行。
但事实上用的是块元素li。因为可以让块元素不换行。有两个方法
inline属性
举个例子
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
}
li {
display:inline;
background-color:yellow;
}
</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>
</body>
</html>
结果如图
image.png
总结，inline属性把block元素变成了inline元素。list-style-type:none;是去掉li自带的小圆点的。
float方法
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
}
li {
float:left;
background-color:yellow;
}
</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>
</body>
</html>
结果如图
image.png
有个问题啊 ，文字靠的太近了.
那给l设置个宽度
li {
float:left;
background-color:yellow;
width:60px;
}
结果如图
image.png
想鼠标悬停时变色，再加这么一句
a:hover {
background-color:red;
}
hover是个伪类选择器
实践中还会有个问题
如下图，点击文字可以，但是点击文字稍微旁边就不行，这不友好
。设置
a {disply:block} 就好了。
##总结
水平导航的关键问题是怎么把li这个block元素让他不换行排列~
##参考
[CSS 导航条](http://www.w3school.com.cn/css/css_navbar.asp)
