2015/08/25 WEB前端 No Comments ul菜单居中_水平居中css样式 ul li导航菜单居中/水平居中css样式。这个方法较简单，是将容器转成`display:inline-block`行内块级元素，然后就可以直接用`text-align:center`使其达到水平居中效果，也是推荐的方法。 示例ul导航菜单HTML代码： ```html <div class="nav"> <ul> <li><a href="/">首页</a></li> … </ul> </div> ``` CSS样式代码： 给外面的div添加`text-align:center`，然后将菜单容器设成`display:inline-block`行内块级元素，菜单浮左`float:left` ```css .nav {text-align:center;} .nav ul {display:inline-block;} .nav li {float:left;} .nav li + li {margin-left:20px;} ``` 这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码 ```html *+html .nav ul {display:inline;zoom:1;} ``` 本文最后更新于 2019-06-27 13:55:00 并被添加「css」标签，已有 3908 位童鞋阅读过。 本文作者：未来往事 本文链接：https://felixway.cn/post/585.html 本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处 相关文章 css ~ , + > CSS样式优先级 高级CSS样式选择器 div+css不换行超出部分省略号显示避免半字 图片等比例缩放CSS样式:max-width:100%兼容IE6方法
此处评论已关闭