横向列表-使用float

      今天做了一个很简单的导航条（太悲催了，这种时候不应该做这个的，沉默）。默认的列表是垂直的，但横向列表的用处也非常大，所以经常要列表打横，今天我做的就是一个横向的列表。这里就碰到了所说的问题。

一开始的我给li的样式使用display:inline，打横之后的效果有这么几个:

1. list-style消失了，也就是列表前面的序号或者标志不见了。
2. 这时候使用padding，你会发现top部分超出整个ul范围了，其他padding太大也会超出。
3. 难以调整，这里我不太记得当时的情况具体是怎样，反正li间的距离等等都难调。效果无法显示出来。

 

    在这里我发现使用display：inline除了很大问题，就想起使用float：left来做。在使用之后我才后悔为什么不一开始就用这个~~其实我看过了大多数网上示例，确实float占多。

     这就是效果，当时保存的半成品，很简单不过用来说明已经够了。感觉用了float好处很多，至少规矩了很多，不会无端端超出范围，设置padding和margin的效果也清楚看到了（前一个样式在设置这些简单样式的时候居然没看到效果 -_-||）。总的来说就这样，以后如果是这种导航条的话，我都想用浮动来解决，display：inline肯定也有自己的用武之地，但至少这里不是一个好选择。