css水平导航栏

导航栏基本上是一个链接列表，一般结构如下：

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

但是由于li元素是块级元素，所以这样无样式规定的话做出来的是垂直导航栏。
想要实现css水平导航栏，两种方法：

方法一.内嵌列表项，设置li元素display：inline;

方法二：浮动列表项，设置li元素浮动 float：left；

今天主要想记录的是两种实现方法的区别:

用第一种方式实现的话会存在两个问题：
1）默认a标签之间会有一定的间距（具体默认是多少就不知道了）
2）由于li标签和a标签都是行内元素（这里的a标签不能修改为display：block属性，否则会改变li的属性），这就导致一个问题就是a标签的长度是由内容撑起的，所以在给它设置背景色之后就会发现不同导航块的长度可能是不同的。 但是也并不是没有解决办法，比如将li标签元素和a标签元素都设置为inline-block，可以解决上面两个问题，然后对两个标签分别设置宽度和高度值。

而用第二种方法是比较推荐的做法

首先设置li的浮动属性；
然后修改a标签display为block；
之后设置a标签宽度；
这样就可以保证a标签之间没有默认的间距，而且各个a标签的宽度是相等的，即看起来标签是等长的就比较美观。