今天做了一个很简单的导航条(太悲催了,这种时候不应该做这个的,沉默)。默认的列表是垂直的,但横向列表的用处也非常大,所以经常要列表打横,今天我做的就是一个横向的列表。这里就碰到了所说的问题。
一开始的我给li的样式使用display:inline,打横之后的效果有这么几个:
- list-style消失了,也就是列表前面的序号或者标志不见了。
- 这时候使用padding,你会发现top部分超出整个ul范围了,其他padding太大也会超出。
- 难以调整,这里我不太记得当时的情况具体是怎样,反正li间的距离等等都难调。效果无法显示出来。
在这里我发现使用display:inline除了很大问题,就想起使用float:left来做。在使用之后我才后悔为什么不一开始就用这个~~其实我看过了大多数网上示例,确实float占多。
这就是效果,当时保存的半成品,很简单不过用来说明已经够了。感觉用了float好处很多,至少规矩了很多,不会无端端超出范围,设置padding和margin的效果也清楚看到了(前一个样式在设置这些简单样式的时候居然没看到效果 -_-||)。总的来说就这样,以后如果是这种导航条的话,我都想用浮动来解决,display:inline肯定也有自己的用武之地,但至少这里不是一个好选择。