float后的水平居中菜单
常用的CSS控制的导航菜单中,使用频率最多的无序列表添加float:left来使得li位于一行。
然而,在li元素进行float:left操作后,菜单的水平居中就成为一个比较棘手的话题。以下文章中,
- 使用position:relative
- 结合CSS的left属性
- 调整li元素的position:relative;让其归还right:50%
使用以上方案调整后,具有float:left的菜单就可以实现水平居中效果。
具体看float:left后的水平居中菜单实例:
提示:你可以先修改部分代码再运行。