css实现导航栏

导航栏如何实现？

以水平导航为例，用块元素还是用内联元素呢？
理论上应该用内联元素，因为块元素会换行。
但事实上用的是块元素li。因为可以让块元素不换行。有两个方法

inline属性

举个例子

Home
News
Contact
About

结果如图

image.png

总结，inline属性把block元素变成了inline元素。list-style-type:none;是去掉li自带的小圆点的。

float方法

Home
News
Contact
About

结果如图

image.png

有个问题啊 ，文字靠的太近了.
那给l设置个宽度

li {
    float:left;
    background-color:yellow;
    width:60px;
    
}

结果如图

image.png

想鼠标悬停时变色，再加这么一句

a:hover {
    background-color:red;
}

hover是个伪类选择器

实践中还会有个问题
如下图，点击文字可以，但是点击文字稍微旁边就不行，这不友好
。设置

a {disply:block} 就好了。
![image.png](http://upload-images.jianshu.io/upload_images/33455-abd6f350855a7219.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##总结
水平导航的关键问题是怎么把li这个block元素让他不换行排列~
##参考
[CSS 导航条](http://www.w3school.com.cn/css/css_navbar.asp)