让UL居中,并且随着LI变化而变化

 2015-02-26 09:46

今天在设计模版时遇到这样一个问题:想让导航栏集中对齐,并且使“ul”随着“li”的增加而变化居中对齐。实现的效果有点像www.pigif.com网站上的情况。

原网站做的很简单,直接用"a"属性,进行了文字排列。这种做法的确很简单实用:不用太多花哨的css,只是把文字一个个排列整齐就可以了。

但由于我是给zblogPHP做模版,后台导航栏使用的是ul+li模式。所以,我不得不修改css。查找了N个方法都不适合,后来在一个论坛中找到一个方法,还是比较适合的,特此分享下。

li{display:inline-block;}  /*使li具备layout--IE下*/

li{display:inline;}/*使li行内元素布局*/

以上两句综合,可使li在一行内布置,并且可为该li设置宽高等属性;可以多搜索下这方面的资料

另:你每个li之间的间距,也可以换个思路来实现:

li之间不需要设置margin-left;让li宽度80px;背景色白色;让li中的a宽度60px来调节视觉上的距离效果

这个方法的原理也很简单,就是通过将li变化属性,将li变成适合自定义排行的格式。这样,就可以实现解决相应的问题了!!

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: